Is it possible to make some kind of pattern matching with html5 to only allow 3-digit numbers to a text form. I do not want the input type to be number because I dont like the visual design of it.
The closest I get is pattern=".{0.3}" But that accepts all kind of text input - not limited to numbers.
<input type="text" name="price" id="price" pattern="fancy code here">
Question: Can you make a pattern in input type="text" that accepts only integers in the max length of 3?
Use this pattern:
\d{1,3}
and the required attribute
Related
I'm sure I miss something, but can't find the reason why this pattern doesn't work... The validator doesn't accept the format of the string I typed (i.e. 06201234567).
<input type="tel" pattern="06\d{7,9}" placeholder="06201234567">
I tried exactly the same code at w3schools' tryit editor, and there were no problem...
In HTML5 you can use <input type='tel'> and <input type='email'>
You can also specify a specific pattern like <input type='tel' pattern='[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}' title='Phone Number (Format: +99(99)9999-9999)'>
Something like pattern='^\+?\d{0,13}' Would give you an optional + and up to 13 digits
The form is in a template where I replaced some texts like {{example}} with other texts and php's preg_replace() search expression {{.*?}} matched {7,9} in the pattern and replaced it.
With the use of ({{.*?}}) everything's OK.
I want to have input element which allows one of two conditions:
Single zero can be entered
Number with max of 9 digits can be entered, but first digit shouldn't be zero
I wrote this regex (solution works in online regex testers):
/(^0$)|(^[1-9]\d{0,8}$)/
But when I use it in ng-pattern in Angular, it doesn't work.
Here is my plunker example:
http://plnkr.co/edit/iDQ7ly8ypJ3UmN5A0hJw?p=preview
Not sure if alternation is doing the problems, or I messed up the regex.
UPDATE: it seems that type="number" is causing problems. Unfortunately, I need to have this in my code, so I'm searching for solution which works with type="number".
This should work for you. I did the following:
Took out the type="number".
Gave the form a name.
Gave the input a name.
Referenced the form and input via their names instead of their id and ng-model values, respectively.
It converts the value to a number under the covers, stripping the leading zeros and converting text to 0, etc.. And the name is the correct way to access it as far as I can tell.
<form name="myForm">
<input name="myNumberField" ng-model="myNumber" ng-pattern="/(^0$)|(^[1-9]\d{0,8}$)/" required/>
<span ng-show="myForm.myNumberField.$error.pattern">Invalid pattern</span>
</form>
Here is a plunker for it.
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 have a input of type number, and I want to make sure it only accepts a number. I can do this fine on the Server side, but with AngularJS I can not get it to work.
Here's the code:
<input type="number" ng-pattern="/[0-9]+/" name="numOfFruits" ng-model="basket.numOfFruits" />
I suspect this has something to do with the pattern I am supplying [0-9]+ basically I only want numbers in this text box, anything that is not made up of the numbers 0 to 9, I want the input invalid.
At the moment, my input field sees this aa23423 as valid input!
You need to use anchors:
/^[0-9]+$/
^: Start-of-line anchor.
[0-9]+ One or more numbers between 0 and 9.
$: End-of-line anchor.
So this matches the start of the string, then it matches the one or more digits, after that it looks for the end-of-string, so it matches a string containing only numbers and nothing else.
Otherwise, /[0-9]+/ will match only a part of aa23423, more accurately the number 23423 and thus will give you valid.
Here is regexp to validate floating point numbers, both positive and negative:
/^-?[0-9]\d*(\.\d+)?$/
Use this regexp in 'text' input, example:
<input type="text" ng-model="score" ng-pattern="/^-?[0-9]\d*(\.\d+)?$/" required/>
Pattern don't work for input with type="number".
You can use type="text" and than convert value to number
Try defining your regex as a scope variable
In the controller, it worked for me.
I have several form elements that accept hex strings like the one shown below.
<input type="text" name="..." onkeyup="a('...')" pattern=\"[a-fA-F0-9]+\" value=\"****\"/>
I am interested in shorting the pattern attribute value to something shorter, but still accept the same pattern. I am doing this because this html is embedded in a micro controller and saving space is desirable. Is there a predefined cross browser hex matching class?
Only thing shorter is
<input pattern="[a-fA-F\d]+"/>
The \d character class is equivalent to 0-9.
More info: RegExp