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.
Related
I need to implement a case when the user types 4 digits then the rest of the digits should be typed at the start of the input field.
For example, if the user types 1234 in the input field and after that type another digit 5 then that 5 will print at the start of the field 51234, and so on 651234.
I checked many examples but that are in javascript. I have to make it for angular
<form [formGroup]="form" >
<input formControlName="test" type="number" (keyup)="check($event.target.value)" name="bizs">
</form>
check(value){}
I am trying to put value in text box with two decimal digits
example
by default it take .00 on entering number
I am using Angular , Reactive form with form Control .
I am sharing my code :
<input placeholder="00.00" (keypress)="convert($event)" formControlName='pendingDuesAmount' [(ngModel)]='pendingAmount' type="text" [ngModelOptions]="{standalone: true}" >
TS
pendingAmount : number = 0.00
convert(event): boolean {
this.pendingAmount.toFixed(2)
}
I want to enter full width number and turn it into half width using jquery but first I need it to accept characters that are not number.
<input id="text1" step="0.5" type="number" value="" name="text1">
I need type number because I want the step feature.
You can't make a type="number" field accept non-numeric characters. If you want to do that, you'll need to use type="text". (If you need the step feature, you'll have to implement it.)
If you want your text filed to accept floating numbers. Use following Input.
<input type="number" step="any" name="text1" value="">
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
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