I am trying to allow some special characters in a field, these characters are the accented vowels (áéíóúÁEÍÍÓÚ), ÑñÇç to allow french and spanish names (i.e Nuño, José, François). My code goes like this:
ng-pattern="/^[a-zA-Z\_\-\&\`\#\. ]*$'áéíóúÁEÍÍÓÚÑñÇç"
And I have tried this too
ng-pattern="/^[a-zA-Z\_\-\&\`\´\#\. ]*$'\á\é\í\ó\ú\Á\É\Í\Ó\Ú\Ñ\ñ\Ç\ç]/"
but when I deploy it in the server, and inspect the field, it changes those characters into unknown characters, like shown below:
<input type="text" name="firstName" class="form-control ng-pristine ng-invalid ng-not-empty ng-valid-required ng-invalid-pattern ng-touched" ng-required="!userDetails.user.firstname" ng-pattern="/^[a-zA-Z\_\-\&\`\�'\#\. ]*$'\�\�\�\�\�\�\�\�\�\�\�\�\�\�/" ng-model="userDetails.user.firstname" aria-invalid="true">
How can I make the compiler to recognize the characters i need?
Thanks
/^[a-zA-Z_\-&`´#\. áéíóúÁÉÍÓÚÑñÇç]*$/ should work in you case - you don't need to place an escape literal (\) in front of a character doesn't need to escape.
As #sln commented, it needed the unicode characters, it works with
^[-a-zA-Z_&`´#. \u0027\u00C1\u00C7\u00C9\u00CD\u00D1\u00D3\u00DA\u00E1\u00E7\u00E9\u00ED\u00F1\u00F3\u00FA]*$
If the charset/encoding of your html (can be set in browser, or in web server) is set to UTF8, you don't need above unicode conversion.
Related
I have this pattern for an input text field: /[\p{L}\'.\- ]{3,30}/ My intention is to accept the most broadly names of people on several alphabets of the world (Latin, Cyrillic, Chinese, etc.) It was tested in Regex101 and it works great. On other testers it doesn't work but my main issue comes as follows:
<form action="mailto:myemail#emailserver.com" id="formula" method="post" enctype="multipart/form-data"
name="formname" class="form-group pt-3" autocomplete="on" ng-submit="register()" novalidate>
<input type="text" name="nombre" ng-pattern="/[\p{L}\'.\- ]{3,30}/">
Here's my code for you to check: https://regex101.com/r/gOvO2M/8
It skips special characters, skips symbols, skips numbers, but when I see the live HTML in the browser, it doesn’t work properly.
In the error message, for validation purposes, I put:
<p class="formu-error" ng-show="formname.nombre.$touched && formname.nombre.$invalid">Please, write a valid name.</p>
The problem is when testing, I write only letters (no spaces, no hyphen because all that is optional) and still giving me the message of the error. Why?
Maybe because I am using \p{L} and that will work only in the server, when I code the server validation in PHP?
You can use
<input type="text" name="nombre" ng-pattern="/^(?=.{3,30}$)\p{L}+(?:['.\s-]\p{L}+)*$/u" ng-trim="false" />
Note the u flag, it enables the Unicode category (property) classes support in JavaScript with the ECMAScript 2018+ support.
Also, ng-trim="false" will prevent trimming whitespace before passing the input to the regex engine.
The regex means:
^ - start of string
(?=.{3,30}$) - the string must consist of 3 to 30 chars other than line break chars
\p{L}+ - one or more Unicode letters
(?:['.\s-]\p{L}+)* - zero or more repetitions of
['.\s-] - a ', ., whitespace or -
\p{L}+ - one or more Unicode letters
$ - end of string.
See the regex demo.
.*(\d{3}\-\d{3}\-\d{2}\-\d{2}|\d{3}\-\d{2}\-\d{2}\-\d{3}|\d{10}).* this pattern was working fine. But suddenly it stop working in chrome and opera lately. What's going on here ? What a problem is here and how it's wrong? Opera is informing about invalid escape, same in chrome. It works fine when im checking it in js.
<form>
<input type="text" pattern=".*(\d{3}\-\d{3}\-\d{2}\-\d{2}|\d{3}\-\d{2}\-\d{2}\-\d{3}|\d{10}).*">
<button>
Send
</button>
</form>
The point is that Chrome and Firefox already support ES6 regex specifications and support the Unicode mode by default.
Unicode patterns have stricter rules as to what characters can be escaped inside the pattern. See this reference:
IdentityEscape: In BMP patterns, many characters can be prefixed with a backslash and are interpreted as themselves (for example: if \u is not followed by four hexadecimal digits, it is interpreted as u). In Unicode patterns that only works for the following characters (which frees up \u for Unicode code point escapes): ^ $ \ . * + ? ( ) [ ] { } |
The same set of chars is referred to as SyntaxCharacter in the ES6 specs page.
So, you can only escape the - inside the character class where it is considered a special character and to make it a literal you can escape it. Everywhere else it must not be escaped.
<form>
<input type="text" pattern=".*(\d{3}-\d{3}-\d{2}-\d{2}|\d{3}-\d{2}-\d{2}-\d{3}|\d{10}).*">
<input type=Submit>
</form>
Try to use below concept to implement to validate the date format
<form onsubmit="alert('Submitted.');return false;"><input required="" pattern="(0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}" value="" name="dates_pattern0" id="dates_pattern0" list="dates_pattern0_datalist" placeholder="Try it out." type="text"><input value="»" type="submit"></form>
you can find more validations by this link - http://html5pattern.com/Dates
This is related to the same problem as this question:
Firefox error: Unable to check input because the pattern is not a valid regexp: invalid identity escape in regular expression
When using escaped characters in the <input> pattern attribute, Firefox throws these errors to the console:
Unable to check <input
pattern='^[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEFa-zA-Z\s\'-]{1,50}$'>
because the pattern is not a valid regexp: invalid identity escape in
regular expression
So when using the pattern attribute on an <input> field, the unicode characters no longer need to be escaped. In that case the user simply needs to stop escaping their characters and change \#\% to #%, problem solved.
I've got this somewhat more complicated regex pattern, what do I change it to to work in Firefox?
<input type="text" pattern="^[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEFa-zA-Z\s\'-]{1,50}$">
Essentially it's allowing for any string between 1..50 characters in length as long as all the characters are within these ranges:
\u00A0-\uD7FF
\uF900-\uFDCF
\uFDF0-\uFFEF
a-z
A-Z
as well as whitespace, apostrophes and hyphens. A quick search sees the \u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEFa part of it fairly widely used in all sorts of regexes. I just don't see exactly what to use instead of the escaped unicode character references here.
You need to remove the escaping backslash before the single quote.
Note that in a regular HTML5 pattern field, one does not have to use ^ and $ anchors at the pattern start/end as the HTML5 pattern attribute encloses the passed pattern with ^(?: and )$. However, as per your feedback, the Abide validation circumvents this and passes unanchored pattern to the regex engine. Thus, you should keep the anchors.
<input type="text" pattern="^[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEFa-zA-Z\s'-]{1,50}$">
A quick demo:
<form>
<input type="text" pattern="[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEFa-zA-Z\s'-]{1,50}">
<input type="submit">
</form>
I'm making a form and I keep getting an odd artifact next to the textbox.
So right after the <br> and right before the <textarea the page loads ​.
What could be causing this?
<input name="pasnr" type="text" value="<?=$pasnr ?>" size="79"><br>
Commentaar: <br>
<textarea name="comments" rows="10" cols="50"><?=$comments ?></textarea><br>
<input type="submit" name="Submit" value="Change">
This looks like an encoding issue.
The Unicode character ZERO WIDTH SPACE is at codepoint U+200B. When expressed in UTF-8 this character is represented by the three bytes E2 80 8B. If these bytes are then interpreted as characters in the CP-1252 encoding they appear as the characters ​.
From the position these characters appear on your page it looks like you’ve somehow introduced a zero width space character in your editor (which is using utf-8) and since you’re not specifying an encoding the browser is defaulting to CP-1252.
A simple fix in this case would be to specify the encoding of the page, either by setting a Content-type header, or by adding <meta charset='utf-8'> to your page (assuming you’re using HTML5). (Alternatively just find the character in the file and delete it).
More generally you need to make sure the encodings you use throughout your application are consistent (i.e. your pages, the database, data from form submissions). If you’re new to character encodings a good place to start is Joel Spolsky’s article.
Just viewed source of your page, there is simply some junk before textarea.
I bet this is UFT8 BOM(special 3char sequence at beginning of utf8 encoded file). If page source comes from text file check if there is UTF8 BOM at file beginning and save file without a BOM.
I have an HTML5 text field for given name (first name).
<input name="name" id="name" autocompletetype="given-name" type="text" alt="" maxlength="16" required/>
Some users put password here. Thus I want to prevent some of them by not allowing numbers. How I'll accomplish this? So, I want only English and Turkish letters plus - and ' for any case, oh and these â,Â,ê.. for any case. Better way is not to allow numbers I guess but is there such way?
I'm going to assume that you can use javascript/jQuery.
Please note that I am unsure if the letter sequence below covers only turkish letters/all turkish letters. However, it is a pretty exhaustive list of letters used in various languages.
Then:
$('#name').on('change', function(){
if(/^[a-zA-Z\- ’'‘ÆÐƎƏƐƔIJŊŒẞÞǷȜæðǝəɛɣijŋœĸſßþƿȝĄƁÇĐƊĘĦĮƘŁØƠŞȘŢȚŦŲƯY̨Ƴąɓçđɗęħįƙłøơşșţțŧųưy̨ƴÁÀÂÄǍĂĀÃÅǺĄÆǼǢƁĆĊĈČÇĎḌĐƊÐÉÈĖÊËĚĔĒĘẸƎƏƐĠĜǦĞĢƔáàâäǎăāãåǻąæǽǣɓćċĉčçďḍđɗðéèėêëěĕēęẹǝəɛġĝǧğģɣĤḤĦIÍÌİÎÏǏĬĪĨĮỊIJĴĶƘĹĻŁĽĿʼNŃN̈ŇÑŅŊÓÒÔÖǑŎŌÕŐỌØǾƠŒĥḥħıíìiîïǐĭīĩįịijĵķƙĸĺļłľŀʼnńn̈ňñņŋóòôöǒŏōõőọøǿơœŔŘŖŚŜŠŞȘṢẞŤŢṬŦÞÚÙÛÜǓŬŪŨŰŮŲỤƯẂẀŴẄǷÝỲŶŸȲỸƳŹŻŽẒŕřŗſśŝšşșṣßťţṭŧþúùûüǔŭūũűůųụưẃẁŵẅƿýỳŷÿȳỹƴźżžẓ]$/.test($(this).val())){
$(this).removeClass('invalidField');
$(this).addClass('validField');
} else {
$(this).addClass('invalidField');
$(this).removeClass('validField');
}
});
And then use CSS to mark fields valid/invalid. (A red border for invalid fields for instance)