I'm trying to validate a form using a regular expression found here http://regexlib.com/. What I am trying to do is filter out all characters except a-z, commas and apostrophes. If I use this code:
<cfinput name="FirstName" type="text" class="fieldwidth" maxlength="90" required="yes" validateat="onsubmit,onserver" message="Please ensure you give your First Name and it does not contain any special characters except hyphens or apostrophes." validate="regular_expression" pattern="^([a-zA-Z'-]+)$" />
I get the following error: Unmatched [] in expression. I figured out this relates to the apostrophe because it works if I use this code(but does not allow apostrophes):
<cfinput name="FirstName" type="text" class="fieldwidth" maxlength="90" required="yes" validateat="onsubmit,onserver" message="Please ensure you give your First Name and it does not contain any special characters except hyphens or apostrophes." validate="regular_expression" pattern="^([a-zA-Z-]+)$" />
So I'm wondering is there some special way to escape apostrophes when using regular expressions?
EDIT
I think I've found where the problem is being caused (thanks to xanatos), not sure how to fix it. Basically CF is generating a hidden field to validate the field as follows:
<input type='hidden' name='FirstName_CFFORMREGEX' value='^([a-zA-Z'-]+)$'>
Because it is using single apostrophes rather than speech marks round the value, it is interpreting the apostrophe as the end of the value.
I think there is a bug in the cfinput implementation. It probably uses the string you pass in pattern in a Javascript Regex but it uses the ' to quote it. So it converts it in:
new Regex('^([a-zA-Z'-]+)$')
Try replacing the quote with \x27 (it's the code for the single quote)
The unmatched ] is because the hyphen is treated to mean a range between the two characters around it. Put the hyphen at the beginning as a best practice.
^([-a-zA-Z']+)$
Related
I have an input field in my Angular component in which i want to not allow a user to be able to type a (space).
I've tried using
<input type="text" [(ngModel)]="inputText" pattern="[a-zA-Z]">
which wasn't what i wanted, and it didn't work anyways!
Does anybody know what the correct regex pattern to just block the (space) key is? And what is the correct way to use the pattern, as the above pattern didn't work...
Thanks in advance.
Using RegEx will still allow the user to type in space. But it will mark the field as invald if a pattern validator is applied to it.
If you don't really want to allow the user to type in space in the first place, you'll have to prevent it by listening to the keydown event on the input and then handling it to prevent its default behaviour. Here, give this a try:
<input type="text" (keydown.space)="$event.preventDefault()">
Here's also a Sample StackBlitz for your ref.
If you want to allow any type of character except spaces alone without any letters, you can use this:
"^\w+( +\w+)*$"
If you also want to use accented vowels, you can use this:
"^[a-zA-Zá-úÁ-Ú0-9]+( +[a-zA-Zá-úÁ-Ú0-9]+)*$"
You can use the following pattern:
<input pattern="[^\s]*">
[^\s] is a negative set which matches every character which is not in the set.
\s matches a white space character (e.g. space, tab, etc.)
* matches 0 or more character of the preceding item
Here is an example of how the browser checks if the pattern is correct (i.e. Google Chrome for example does not allow you to submit the form if there is a whitespace character in it. Test it here (enter a string containing a white space and hit Submit):
<form>
<input pattern="[^\s]*">
<button type="submit">Submit</button>
</form>
The best way of addressing this problem is by writing the directive which you can use on multiple locations.
Here is the Stackblitz sample for the same
My HTML has the following input element (it is intended to accept email addresses that end in ".com"):
<input type="email" name="p_email_ad" id="p_email_ad" value="" required="required" pattern="[\-a-zA-Z0-9~!$%\^&*_=+}{\'?]+(\.[\-a-zA-Z0-9~!$%\^&*_=+}{\'?]+)*#([a-zA-Z0-9_][\-a-zA-Z0-9_]*(\.[\-a-zA-Z0-9_]+)*\.([cC][oO][mM]))(:[0-9]{1,5})?$" maxlength="64">
At some point in the past 2 months, Chrome has started returning the following JavaScript error (and preventing submission of the parent form) when validating that input:
Pattern attribute value
[\-a-zA-Z0-9~!$%\^&*_=+}{\'?]+(\.[\-a-zA-Z0-9~!$%\^&*_=+}{\'?]+)*#([a-zA-Z0-9_][\-a-zA-Z0-9_]*(\.[\-a-zA-Z0-9_]+)*\.([cC][oO][mM]))(:[0-9]{1,5})?$
is not a valid regular expression: Uncaught SyntaxError: Invalid
regular expression:
/[\-a-zA-Z0-9~!$%\^&*_=+}{\'?]+(\.[\-a-zA-Z0-9~!$%\^&*_=+}{\'?]+)*#([a-zA-Z0-9_][\-a-zA-Z0-9_]*(\.[\-a-zA-Z0-9_]+)*\.([cC][oO][mM]))(:[0-9]{1,5})?$/: Invalid escape
Regex101.com likes the regex pattern, but Chrome doesn't. What syntax do I have wrong?
Use
pattern="[-a-zA-Z0-9~!$%^&*_=+}{'?]+(\.[-a-zA-Z0-9~!$%^&*_=+}{'?]+)*#([a-zA-Z0-9_][-a-zA-Z0-9_]*(\.[-a-zA-Z0-9_]+)*\.([cC][oO][mM]))(:[0-9]{1,5})?"
The problem is that some chars that should not be escaped were escaped, like ' and ^ inside the character classes. Note that - inside a character class may be escaped, but does not have to when it is at its start.
Note also that HTML5 engines wraps the whole pattern inside ^(?: and )$ constructs, so there is no need using $ end of string anchor at the end of the pattern.
Test:
<form>
<input type="email" name="p_email_ad" id="p_email_ad" value="" required="required" pattern="[-a-zA-Z0-9~!$%^&*_=+}{'?]+(\.[-a-zA-Z0-9~!$%^&*_=+}{'?]+)*#([a-zA-Z0-9_][-a-zA-Z0-9_]*(\.[-a-zA-Z0-9_]+)*\.([cC][oO][mM]))(:[0-9]{1,5})?" maxlength="64">
<input type="Submit">
</form>
I was experiencing the same issue with my application but had a slightly different approach to a solution. My regex has the same issue that the accepted answer describes (special characters being escaped in character classes when they didn't need to be), however the regex I'm dealing with is coming from an external source so I could not modify it. This kind of regex is usually fine for most languages (passes validation in PHP) but as we have found out it breaks with HTML5.
My simple solution, url encode the regex before applying it to the input's pattern attribute. That seems to satisfy the HTML5 engine and it works as expected. JavaScript's encodeURIComponent is a good fit.
I am trying to allow a space in an input form field using HTML5
the code:
<input id="insightly_FirstName" name="FirstName" type="text" placeholder="characters and space only" pattern="^[A-Za-z.'-s]$" title="only Characters, spaces, and . ' - can be used" required/>
whenever I add \s and save the code Wordpress erases the "\s" sign!!
I found out the solution by adding a space inside the pattern like this :"^[A-Za-z.'- ]$"
Foundation abide adds "data-invalid" attribute to input when submitting form with empty field with regex validation pattern.
<input id="IBAN" name="IBAN" pattern="(\w{2}\d{26})?" type="text" value="" />
How to set up abide to ignore regex validation when field is optional, not required and empty?
It appears that abide doesn't like your pattern/regular expression, specifically the question mark.
I think what you are trying to validate is a string that includes at least two alphanumeric characters and the underscore being case insensitive, \w{2}, followed by at least twenty-six digits, \d{26}.
If that is the case then I believe that just using <input id="IBAN" name="IBAN" type="text" pattern="(\w{2}\d{26})"> or <input id="IBAN" name="IBAN" type="text" pattern="\w{2}\d{26}"> would work.
I also created a codepen that demonstrates the two ways to set up abide patterns if it helps.
If that's not what you are wanting the regular expression to do or if I am on the wrong track let me know.
Thanks,
I'm trying to sanitize HTML tags, e.g. turn
<input type="image" name="name" src="image.png">
into the correct empty-element form
<input type="image" name="name" src="image.png" />
with a slash at the end.
I'm using Eclipse's Find/Replace with regular expressions like this:
Find: <(input .*)[^/]>
Replace with: <\1 />
But I end up with
<input type="image" name="name" src="image.png />
I.e. the last quote is missing.
Is that an error in my regex, or a bug in Eclipse?
The term [^/] is consuming the quote. Move it inside the captured group:
Find: <(input .*[^/])>
Replace: <\1 />
The error is in your regex. The [^/] at the end captures the last non-> character. \1 represents the first capturing group, which would be (input.*). In short, you are getting everything inside the tag except the last character. If you put the [^\] inside your group, your replace should work.
Also, you may run into issues if you have a / inside of one of your attribute values. For performance reasons, I would recommend using the following regex:
<(input [^/]*(/[^/]*)*)>
In this case, it does not have to backtrack if you have a / inside of one of your attributes. Your regex should capture everything you need though.