Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 6497
  • Last Modified:

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(count=5)

Invalid entries: 1111111111(count=10),avbsdfas,122aafdaf etc.

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(count=10), avbsdfas,122aafdaf etc.

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
0
ksd123
Asked:
ksd123
  • 8
  • 6
1 Solution
 
Kyle HamiltonData ScientistCommented:
<input type="number" ng-minlength="9" ng-maxlength="9" ng-pattern="\[0-9]\" />

see this example. it has everything you need to accomplish what you are looking for:

http://docs.angularjs.org/api/ng.directive:input
0
 
ksd123Author Commented:
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,

<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>

Open in new window

0
 
ksd123Author Commented:
Uploaded screenshot
test-numeric.png
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
Kyle HamiltonData ScientistCommented:
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.
0
 
ksd123Author Commented:
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.

0
 
ksd123Author Commented:
0
 
Kyle HamiltonData ScientistCommented:
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)
0
 
Kyle HamiltonData ScientistCommented:
OK, have a look at this:

http://jsfiddle.net/58BF2/12/
0
 
Kyle HamiltonData ScientistCommented:
with both input fields:

http://jsfiddle.net/58BF2/21/
0
 
ksd123Author Commented:
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?
0
 
Kyle HamiltonData ScientistCommented:
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.
It seems we can't put regular expression with built-in ng-pattern directive
not sure what you mean. like this: http://jsfiddle.net/58BF2/22/ ?
0
 
ksd123Author Commented:
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.
0
 
Kyle HamiltonData ScientistCommented:
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/
0
 
Kyle HamiltonData ScientistCommented:
ok, here is a complete solution:
http://jsfiddle.net/58BF2/70/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 8
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now