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

Kyle Hamilton

<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

ksd123

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,

<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

ksd123

ASKER

Uploaded screenshot
test-numeric.png

Kyle Hamilton

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.

ksd123

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.

ksd123

ASKER

Fiddler link

Kyle Hamilton

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)

Kyle Hamilton

OK, have a look at this:

http://jsfiddle.net/58BF2/12/

Kyle Hamilton

with both input fields:

http://jsfiddle.net/58BF2/21/

ksd123

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?

Kyle Hamilton

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

ksd123

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.

Kyle Hamilton

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/

ASKER CERTIFIED SOLUTION

Kyle Hamilton

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial