Home arrow JavaScript arrow Page 2 - 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 - First, the Forms
(Page 2 of 5 )

Let’s have a quick preview of what the code will now be in all forms to ensure the script will work.


<script language="JavaScript" 
type
="text/javascript" 
src
="/includes/forms.js">
</script>
 
<form name="form1" action="/mailer.asp" 
  method="post" onsubmit="return 
  checkForm( document.form1 )">
<input type="text" name="name_required" />
<input type="text" name="email_required" />
<input type="text" name="age_required" 
 onkeypress="return checkInt( event )" />
<input type="text" name="comments" />
<input type="submit" />
</form>

So you’ve cleverly deuced that the JavaScript functions will be contained in one big container file called ‘forms.js’. Whenever we have a form that needs validating, all that need be done is a simple inclusion of this script file, and the attaching of ‘_required’ to the end of any… you guessed it, required fields! Oh, and one more thing.

We need to tell the client browser that when the user is done filling out the form, please verify it before sending to the server. This is accomplished by the onsubmit handler.

But what was that whole mess with the age field? We’ll deal with that a little bit later, for now let’s delve into the workings of the actual checkForm function.


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 7 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials