Solved

Client side validation using Angular

Posted on 2014-01-14
14
5,608 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
Technology Partners: 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!

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

749 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