Home arrow JavaScript arrow Page 4 - Universal Form Validation
JAVASCRIPT

Universal Form Validation


We have witnessed the wonders of JavaScript and its ability to ensure that our forms are properly filled before submission. But it gets so laborious to type and modify and update form validation scripts for every for in every application. Take heart! Upon reading and applying the methods in this article, you will never again have to worry about client-side validation! Hazzah!

Author Info:
By: Justin Cook
Rating: 4 stars4 stars4 stars4 stars4 stars / 24
February 02, 2004
TABLE OF CONTENTS:
  1. · Universal Form Validation
  2. · First, the Forms
  3. · Good Form, Jack!
  4. · Pick a Number, Any Number!
  5. · And Knowing is Half the Battle

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Universal Form Validation - Pick a Number, Any Number!
(Page 4 of 5 )

Now, to ensure numeric data types, we could just rely on post-submission server-side checking. You can refer to the article Easy Error Management for the perfect method (‘IsTrulyNumeric’) of doing that.

While that is good, and we still want to use such checking just in case, we don’t want to deter the user from finishing the form. You see, if we give them an error message after they’ve gone through the trouble of finishing the form, then forcing them to go back and change it, chances are that they’ll click the lovely grey ‘x’ in the top right corner of the screen.

The most effective way I’ve found yet is using JavaScript to traps keystrokes as they’re entered, and only allow them if they’re numeric. Simply add this to each field that’s only accepts numbers:


onkeypress="return integersOnly( event )"

And here’s the function itself:


function integersOnly(e) {
 e 
= (e) ? event;
 
var  charCode =  (e.intCode) ? e.intCode 
 
((e.keyCode) ? e.keyCode 
 
((e.which) ? e.which 0));
 
if (intCode 31 && 
 
(intCode 48 || intCode 57)) {
  alert
("Numbers only please!.");
  
return false;
 
}
 
return true;
}

So this is pretty simple, and is stops letters from ending up where they don’t belong! This function can be modified to allow further characters, such as ‘.’ or ‘-‘, or whatever else you need it for!

You may be inclined to remove the alert, but I wouldn’t. You see, users get fairly frustrated when it seems that their keyboard has inexplicably failed to enter the key they know they just depressed with their finger. This in turn may lead to them angrily displaying that very finger to you.

It’s just best to let them know what’s going on. Trust me.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 10 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials