Solved

Client side validation using Angular

Posted on 2014-01-14
14
5,247 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
 
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now