I am trying to implement input number field which will allow positive or negative numbers.
I have used "/^0|[1-9]\d*$/" regex expression for ng-pattern.
But it is not working.For character input it is not showing any error.
I have pasted my code here.
Update
I don't want to make this field as required.I just want only number validation(charters are not allowed).
There are a couple of problems with your code:
The pattern /^0|...$/ is interpreted as /(^0)|(...$)/. So, your pattern will accept any string that either begins with 0 (no matter what follows) or ends with any digit in [1-9] (optionally followed by any number of digits).
The correct pattern is: /^(0|[1-9][0-9]*)$/ (note that \d will match more characters than [0-9], e.g. arabic digit symbols etc).
The input elements of type number are handled in the following way by the browser:
If their content is not a valid number, then their value property is set to ''.
Thus, entering 1w3 will cause the value to be an empty string, so then pattern will not be applied.
You should use an input element of type text.
(This is not directly related to your question, but I noticed in your fiddle, you were using <form>.<input>.$invalid, instead of the (probably) intended <form>.<input>.$valid.
$invalid is a property of the FormController only.)
Based on the above, your code should look more like this:
<input type="text" name="price_field" ng-model="price"
ng-pattern="/^(0|[1-9][0-9]*)$/" />
(For accepting negative numbers as well, change ng-pattern to /^(0|\-?[1-9][0-9]*)$/.)
See, also, this short demo.
(UPDATE: The demo has been updated to illustrate the differences between number- and text-fields and between different patterns.)
Why do not use required with min. So we can write:
<div ng-app ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit()">
<input type="number"
ng-model="price"
ng-init="price=0"
name="price_field"
min="0"
required
>
<span ng-show="myForm.price_field.$error.required ||
myForm.price_field.$error.min">Not a valid number!</span>
<input type="submit" value="submit" />
</form>
</div>
Demo Fiddle
Howevewr if you still want to use pattern, remove type="number". I'm not sure but sounds like type number has own pattern, this is a reason why it doesn't work.
Here is 2nd Demo Fiddle
used htm5 pattern for input number only
<input type="number" name="country_code" pattern="[0-9]" >
http://www.w3schools.com/tags/att_input_pattern.asp
Related
I have a form in HTML5 and I want to add validation elements to the name, address and phone fields. So far I have the following code:
name='name' pattern='(-.''[A-Za-z])'
name='phone' pattern='[0-9+()x-' ']'
name='address' pattern='[0-9A-Za-z][.,#/\:;''&*]'
For the name, I need it to be able to accept the -'. symbols.
For the phone, I need it to be able to accept +()0-9 x and space.
For address, I need it to be able to accept all of the characters I've put there.
I'm not sure I've done it right though, as when testing I don't get error messages.
You need to enclose the pattern in " as you are also using ' within your pattern itself.
Sample for the name field, including the correct pattern string:
<form>
<input type="text" name="name" required pattern="[-.'A-Za-z]+" /><input type="submit">
</form>
(assuming you want to allow -'. plus the characters, your requirements are not 100% clear to me)
I'm using the Verify.js library (http://verifyjs.com/). It seems to be exactly what I need to do client side validation.
However, I'm having trouble getting it to work with my regular expressions I'm writing. It seems whenever I try a lookahead, the form is always allowed to be submitted and the regular expression is not evaluated (maybe it's not compiling)?
I believe my regular expression is correct. I'm trying to verify the user input an integer or a decimal.
<form>Type abc
<input required type="text" data-validate="regex(^abc$)" />Type integer/decimal
<input required type="text" data-validate="regex(^[0-9]+([\,\.][0-9]+)?$)" />
<input type="submit" />
Here's a fiddle:
https://jsfiddle.net/ms4pg776/1/
I fixed this by adding a rule to the $.verify variable.
$.verify.addRules({
isIntegerOrDouble: {
regex: /^[0-9]+([\\.][0-9]+)?$/,
message: "Please enter an integer or a decimal number."
}
});
Then in the HTML:
<input required data-validate="isIntegerOrDouble" type="text"/>
Hope it helps someone!
I am having a issue validating phone number. The phone number is a 10 digit string that should be populated in a three input field
1st input field - have only 3 digits only ( requires, can accept only numbers and max length 3)
2nd input field - have only 3 digits only ( requires, can accept only numbers and max length 3)
3rd input field - have only 4 digits only ( requires, can accept only numbers and max length 4)
and tab should be moved to next input field, when maximum number of characters have been implemented in the first one
the fields should be red, when none of the above conditions are not meeting
<label for="phoneone" aria-label="Enter First 3 digits of your phone no."><input id="phoneone" type="number" required name="phoneone" class="phone-text-box" ng-model="user.phoneNumbercodeone" ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/"></input></label>
<label for="phonetwo" aria-label="Enter second 3 digits of your phone no."><input id="phonetwo" type="number" required name="phonetwo" class="phone-text-box" ng-model="user.phoneNumbercodetwo" ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/"></input></label>
<label for="phonethree" aria-label="Enter last 4 digits of your phone no."><input id="phonethree" type="number" required name="phonethree" class="phone-text-box" ng-model="user.phoneNumbercodethree" ng-minlength="4" ng-maxlength="4" maxlength="4" ng-pattern="/^[0-9]*$/"></input></label>
<div class="clearfix" ></div>
how would i achieve the above validation conditions using input html tag
You should use input pattern validation. This can be done using the ng-pattern directive:
NgPattern sets pattern validation error key if the ngModel value does not match a RegExp found by evaluating the Angular expression given in the attribute value. If the expression evaluates to a RegExp object, then this is used directly. If the expression evaluates to a string, then it will be converted to a RegExp after wrapping it in ^ and $ characters. For instance, "abc" will be converted to new RegExp('^abc$').
Note: Avoid using the g flag on the RegExp, as it will cause each successive search to start at the index of the last search's match, thus not taking the whole input value into account.
There are a couple of small issues with your code. Specifically I am looking at ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/". You can achieve your number validation using the html5 properties of min and max on your input. So your input would look something like this:
<input id="phoneone" type="number" name="phoneone" class="phone-text-box" ng-model="user.phoneNumbercodeone" ng-minlength="3" ng-maxlength="3" min="100" max="999" />
And then you can run validations against that using something like this:
<div ng-show="phoneForm.phoneone.$invalid && phoneForm.phoneone.$dirty">
<div ng-show="phoneForm.phoneone.$error.minlength || phoneForm.phoneone.$error.maxlength">This must be a 3 digit number</div>
</div>
Of course exchanging out phoneForm for the name of your form.
I am trying to use a regular expression to validate an email address. It does not seem to be doing any validation at all. When I load the page the Submit button is disabled because of the $pristine but as soon as I type a letter the button becomes enabled. Also I am aware that the regex is only accepting upper-case at the moment. The following code is my form:
<form name="myForm" ng-hide="email" >
Insert Email : <br/>
<input type="text" name="email" ng-pattern="/^[A-Z0-9._%+-]+#[A-Z0-9.-]+\\.[A-Z]
{2,4}$/" ng-model="insert_email" required>
<br/>
<button ng-hide="email"
type="submit"
ng-disabled="myForm.email.$pristine || myForm.email.$invalid">Submit</button>
</form>
I am not sure but I think the problem may lie with the regex itself.
take out the email in myForm.email.$pristine and in myForm.email.$invalid
to look like:
myForm.$pristine
and
myForm.$invalid
also try with ng-required instead of required
It seems to be two things. It looks like the ng-pattern expects an expression instead of a string attribute.
So you need to wrap it in a string if you want to use an inline expression.
Like so:
ng-pattern="'^[A-Z0-9._%+-]+#[A-Z0-9.-]+\\.[A-Z]{2,4}$'"
Also, there seems to be some issues with your regex. I changed it to this:
ng-pattern="'^[a-zA-Z0-9._%+-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$'"
It seems to work.
Plunker Demo
I'm using ng-pattern argument in input text to limit input to numeric values:
<input type="text" ng-model="numericField" ng-pattern="/^[0-9]*$/" />
But there is a strange behavior in regex evaluation: starting and ending spaces are ignored...
So if I insert these values (for example) I get different results:
' 123 ' pattern matched
' 123 4343 ' pattern not matched
In my case white spaces are not allowed (in any position of the string).
Update I need to solve the problem also for other inputs allowing char values (i.e. email)
So how can I solve this?
Why not just use:
<input type="number" ng-model="numericfield" />
html5 behaviour is implemented by angular in older browsers.
You can add ng-trim="false" to your input text:
<input type="text" ng-model="numericField" ng-pattern="/^[0-9]*$/" ng-trim="false" />
Take a look here