Currently I have a form accepting domain names, so I need to preclude every special character & space except for . and - being entered.
my current code:
<input type="text" name="domain-name" placeholder="i.e. example.com" pattern="^(\d|\w)+$" class="form-field w-input" required id="domain-name">
Won't accept . or -
How can I change it so that it accepts . and -
The pattern attribute should look like
pattern="[\w.-]+"
Details
The ^ (start of string) and $ (end of string) anchors are redundant in a pattern regex since the resulting RegExp object is compiled with the ^(?: before and )$ after the string pattern typed in the attribute value
\w matches digits by itself, so [\w\d] = \w
To match . or -, you need to put \w inside a character class, [], and add . and - to this character class.
Related
I try to allow only certain letters in the HTML input field including German Umlaute.
However, using:
<input pattern="[a-zA-Z0-9-##.+_ \ä\ö\ü\Ä\Ö\Ü]" type="text" value="">
or alternatively:
<input pattern="[a-zA-Z0-9-##.+_ äöüÄÖÜ]" type="text" value="">
Gives the error (in Chrome):
Pattern attribute value [a-zA-Z0-9-##.+_ \ä\ö\ü\Ä\Ö\Ü] is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /[a-zA-Z0-9-##.+_ \ä\ö\ü\Ä\Ö\Ü]/: Invalid escape
How to include the Umlaute in the input pattern attribute?
Update:
It works now. Escape the special characters: pattern="[a-zA-Z0-9\.\-\+ äöüÄÖÜ]*"
Three errors in your regExp pattern.
\ä can't be escape by Browser like \b \s, because of ä is not a special character.
while - is considered as a string instead of [from-to], it must be escaped as \-.
// don't need escape
. _ = * ^ $ etc.
Four character need to be escaped are :
// need escape
[ ] - \ .
need a * at the end of your pattern to match more than one character.
The - after 9 must be escaped.
<input pattern="[a-zA-Z0-9\-##.+_ äöüÄÖÜ]*" type="text" value="">
Unicode flag used by default in pattern regExp in the current versions of Chrome and FF, and Browser will check your pattern is right or wrong.
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode
i'm not good in html pattern validation.
I have this problem, my input text is valid only : min 3 max 30 chars,
white space at first and at end of the string is not allowed, is allowed white space between one word and another is allowed, is allowed A-Za-z, first char of word it must be Uppercase and the others word it must be Lowercase.
Thanks.
--UPDATE--
input#name
Valid Examples:
'Mario Giovanni'
'Maria'
'Jacopo Karol Pio'
'Jacopo K'
Invalid Examples:
' Mario Giovanni'
'Mario Giovanni '
' Mario Giovanni '
'Mario Giovanni'
'maria'
'mAria'
'Antonio mario'
If you need pure regex then this should work for you:
<input type="text" pattern="(?=^.{3,30}$)^[A-Z][a-z]*(?: [a-z]+)*$">
(?=^.{3,30}$) - use a positive lookahead to make sure we have between 3 and 30 chars
^[A-Z] - require start with a capital letter
[a-z]* - optionally allow lowercase letters to follow
(?: [a-z]+)* - optionally allow a repeating group of a space char follow by one or more letters
$ - end of string anchor
You will want to use a Regular Expression pattern to check whether the input is valid or not, as well as the maxlength and minlength attributes to ensure that the input is between 3 and 30 characters.
Regarding the RegEx pattern, we must:
Start at the beginning of the input: ^
Verify that the first character is between A and Z: [A-Z]
Verify that the following characters before the last one are lowercase letters or spaces: [a-z ]*, where * indicates that there might be multiple characters matching that part of the pattern; if you only want to allow one space between word, then use ([a-z]* ?)
Verify that the last character is a lowercase letter: [a-z]$, where $ indicates the end of the input
Below is the code I would use.
<input type="text" minlength=3 maxlength=30 pattern="^[A-Z][a-z ]*[a-z]$">
Looks like what you wait is:
<input type="text" pattern="(?=^.{3,30}$)^[A-Z][a-z]+( [A-Z][a-z]+)*$">
Notice this is being validated in the user browser, and doesn't configure a secure input validation. You should check the input again at server-side before using it anywhere.
Codepen example:
https://codepen.io/Trost/pen/KXBRbY
Try putting 1 symbol in both fields.
I can't get what's wrong. If I test these regex in https://regex101.com, they appear to be identical.
<form>
Works: <input type="text" name="country_code" pattern="[\d\s-]{3}" title="-23" required>
<input type="submit">
</form>
<form>
Bug: <input type="text" name="country_code" pattern="[\d-\s]{3}" title="- 3" required>
<input type="submit">
</form>
The real root cause here is that the regex [\d-\s] is used in the pattern HTML5 attribute, and in the latest versions of Chrome and FireFox is compiled as an ES2015-compatible regex with the u modifier. The consequence is that there are much stricter escaping rules for the Unicode regex patterns.
What it means is whenever a char cannot be parsed unambiguously, it is an error. When a char is escaped, but does not need escaping, it is again an error.
The chars that you may escape in the character class inside a u based regex are +, $, ^, *, (, ), |, \, [, ], ., ?, -, {, } (see this source). If the - is at the start/end of the character class, it still can go unescaped, as it can only be parsed as a literal hyphen there.
In between two shorthand character classes, an unescaped - will produce an error because it is treated as a user error.
So, either place a hyphen at the start/end (it is always the best option), or escape it inside the character class (and never escape it outside of the character class).
You define two different things:
[a-z] is a definition of a range - all characters from a to z.
[az-] is a definition of a set of three elements - a, z and
-.
When I define a model name in two words separated by '-' example: "first-name", it returns me zero instead of the actual value. Here is my code: http://jsbin.com/visabuyuxu/edit?html,js,output
Can someone help me understand this, I am a new bee to angular.
Variable names containing - are not supported in JavaScript as a whole. The parser will interpret it as a subtraction operator.
You need to use either underscores _ or camelCase.
more info: https://en.wikipedia.org/wiki/Naming_convention_(programming)#Readability
use Ankh "You need to use either underscores _ or camelCase."
You can't use the hyphen (-) character inside of javascript variables because it is an operator, the subtraction operator to be precise. Try removing them or replacing the hyphens with the _ character. There's also camelCasing.
Name : <input type="text" ng-model="name">
<div ng-bind="name"></div>
<div ng-init="firstName='John'"></div>
<p ng-bind="firstName"></p>
I am trying to validate a username field. The field must have numbers, letters and no special chars.
This pattern="[A-Za-z0-9]" stands for username with numbers and letters.
What the pattern should be?
Your pattern stands for a single uppercase-char, lowercase-char or number.
The pattern you want looks like this:
/^[a-z\d]+$/i
Explained:
^ - from the start of the string (or line with the m flag)
[ - start character class
a-z - range of characters from a to z
\d - the same as 0-9 (any digit)
] - close character class
+ one or more
$ - end of string (or line with the m flag)
Then we have the flags outside the actual regexp // itself.
We're using the i flag which stands for case insensitive.
Cheatsheets / Tools
http://regexr.com/
http://rubular.com/
try this
<input type="text" class="form-control" name="username" onkeyup="if (/[^|a-z0-9]+/g.test(this.value)) this.value = this.value.replace(/[^|a-z0-9]+/g,'')">
I don't know if this can be done in raw HTML (doubt it), so you'll need some javascript. You can have a function called on the "onchange" attribute if you like, so the element would be like:
<input id="username" type="text" onchange="validate()" name="name" value=""/>
The javascript function would then just access the element, get the value, and check what is in it, like so:
function validate() {
var name = document.getElementById("username").value;
//do checking here however you like (regex, iteration, etc.)
}
BUT, this needs to be done server side. You can do it client-side if you really want to, but it MUST be done on the server side, in any case. I assume you meant on the client side since you tagged the question with HTML, rather than a server side language.
This should work to test a string for only characters and numbers with javascript.
/^[a-zA-Z0-9]+$/