Solved

Client side validation using Angular

Posted on 2014-01-14
14
5,405 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
  • 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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…

785 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