asked on
Client side validation using Angular
Hi Experts,
I am using HTML5,BOOTSTRAP and AngularJS and need to validate two numeric fields using AngularJS
1)NumericField1: Allow maximum 9 numeric values ie.without special characters,white spaces,alphabets etc.
valid entries: 111111111(count=9),11111(c
Invalid entries: 1111111111(count=10),avbsd
2)NumericField2: Allow 9 numeric values only [9].ie without special characters,white spaces,alphabets etc and once user enters valid number (ex:111111111(count=9)) and moves to next field I need to split 9 digits into 3 chunks ie.(111 111 111) into the textbox.
valid entries: 111111111(count=9), 211511121(count=9)
Invalid entries: 11(count=2),1111111111(cou
Note:Both the above numeric fields are not maniditory to submit the form but if user enters a value in these fields need to validate.
I need to highlight the text boxes and show the "input not in correct format" message besides the textbox.
Please provide me with sample working code.
Thanks in Advance
I am using HTML5,BOOTSTRAP and AngularJS and need to validate two numeric fields using AngularJS
1)NumericField1: Allow maximum 9 numeric values ie.without special characters,white spaces,alphabets etc.
valid entries: 111111111(count=9),11111(c
Invalid entries: 1111111111(count=10),avbsd
2)NumericField2: Allow 9 numeric values only [9].ie without special characters,white spaces,alphabets etc and once user enters valid number (ex:111111111(count=9)) and moves to next field I need to split 9 digits into 3 chunks ie.(111 111 111) into the textbox.
valid entries: 111111111(count=9), 211511121(count=9)
Invalid entries: 11(count=2),1111111111(cou
Note:Both the above numeric fields are not maniditory to submit the form but if user enters a value in these fields need to validate.
I need to highlight the text boxes and show the "input not in correct format" message besides the textbox.
Please provide me with sample working code.
Thanks in Advance
JavaScriptHTMLASP.NET
Last Comment
Kyle Hamilton
ASKER
I have tried the above code in fiddler for the first numeric field that allows to enter maximum 9 numbers but it's not working.
I have changed input type to "text" because in UI the textbox will appear as dropdown if input type="number" but I don't want the textbox to look like "dropdown".
In both the cases either input type="number" or "text" it's not working.
After lost focus on textbox the error should appear besides text box.Please see attached screenshot for the UI,
I have changed input type to "text" because in UI the textbox will appear as dropdown if input type="number" but I don't want the textbox to look like "dropdown".
In both the cases either input type="number" or "text" it's not working.
After lost focus on textbox the error should appear besides text box.Please see attached screenshot for the UI,
<div class="row">
<label class="col-lg-6">Test Numeric</label>
<div class=" col-lg-6"/>
<input type="text" class="form-control" ng-minlength="9" ng-maxlength="9" ng-pattern="\[0-9]\"/>
</div>
</div>
ASKER
Uploaded screenshot
test-numeric.png
test-numeric.png
Did you read the angular documentation in the link I posted? The example I gave you contains the relevant angular parameters, but it is by no means a complete solution. You have to read the documentation and make it work for your situation.
If you need more help, post a link to your fiddler.
If you need more help, post a link to your fiddler.
ASKER
Thank you.I just followed the pattern for the "Last name" in the documentation that suits my requirement ie. initially it will not show any error message or information and if you enter invalid data to text field , it will show message.I have tried in fiddler and it's not working .( always shows "Not Valid" message prior to enter data and and not validating length,special characters etc)
I should allow upto 9 numbers without special characters,white spaces,alphabets etc.
I should allow upto 9 numbers without special characters,white spaces,alphabets etc.
ASKER
You need to make sure you have an app and controller defined.
start with this example. it appears jsfiddle is a little funky when it comes to angular.
http://jsfiddle.net/api/post/library/pure/
(I have a working example, I'll post later)
start with this example. it appears jsfiddle is a little funky when it comes to angular.
http://jsfiddle.net/api/post/library/pure/
(I have a working example, I'll post later)
ASKER
Thank you so much. I appreciate your time.
It seems we can't put regular expression with built-in ng-pattern directive.Anyway it's working fine.just a small favor ,for the second input field once user enters valid data (9 digits), I need to split the 9 digits with 3 chunks (ex:111111111=111 111 111). Can we do in angular?
It seems we can't put regular expression with built-in ng-pattern directive.Anyway it's working fine.just a small favor ,for the second input field once user enters valid data (9 digits), I need to split the 9 digits with 3 chunks (ex:111111111=111 111 111). Can we do in angular?
1. yes. I wasn't sure what you meant exactly. do you want the input field itself to update with spaces? on blur? or as user is typing (that's a little more complicated, cause of the whole pattern validation)?
2.
2.
It seems we can't put regular expression with built-in ng-pattern directivenot sure what you mean. like this: http://jsfiddle.net/58BF2/22/ ?
ASKER
Thank you.I tried giving regular expression to ng-pattern and it's working fine.
Now I just need input field to update itself with spaces on blur.
Now I just need input field to update itself with spaces on blur.
to start with, here is the regex for the second input field. I'll get back to it later, in the meantime if you can figure it out, great.
http://jsfiddle.net/58BF2/25/
http://jsfiddle.net/58BF2/25/
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
see this example. it has everything you need to accomplish what you are looking for:
http://docs.angularjs.org/api/ng.directive:input