Solved

Client side validation using Angular

Posted on 2014-01-14
14
5,757 Views
Last Modified: 2014-01-16
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
Comment
Question by:ksd123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 6
14 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39781078
<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
 

Author Comment

by:ksd123
ID: 39781532
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
 

Author Comment

by:ksd123
ID: 39781533
Uploaded screenshot
test-numeric.png
0
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39781994
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
 

Author Comment

by:ksd123
ID: 39782171
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
 

Author Comment

by:ksd123
ID: 39782176
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39782235
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39782374
OK, have a look at this:

http://jsfiddle.net/58BF2/12/
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39782428
with both input fields:

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

Author Comment

by:ksd123
ID: 39783887
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39784181
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
 

Author Comment

by:ksd123
ID: 39784688
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39785162
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
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 39785643
ok, here is a complete solution:
http://jsfiddle.net/58BF2/70/
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question