Home arrow HTML arrow Page 5 - DHTML Form Enhancement
HTML

DHTML Form Enhancement


There are few tools to speed up form development. This article illustrates simple ways to provide some basic enhancements to your web application's forms such as validation, automatic submission, and hilighting of the field in focus.

Author Info:
By: David Fells
Rating: 4 stars4 stars4 stars4 stars4 stars / 40
June 21, 2004
TABLE OF CONTENTS:
  1. · DHTML Form Enhancement
  2. · Visual Appeal
  3. · Extensible Validation
  4. · Regex Validation and Equality Checking
  5. · Extending the validate function

print this article
SEARCH DEVARTICLES

DHTML Form Enhancement - Extending the validate function
(Page 5 of 5 )

Some simple ways to extend the form's validation support would be to build in regex-based validation types to check for common data types such as phone numbers, email addresses, and postal codes. You could use validate="email" and add a section in the validate function's case statement to handle that type of validation. You could also extend the function to support confirmation prompts and suggestion boxes when users enter invalid data or to verify that a user understands what the data in the form will be used for and give them a chance to choose not to submit or to make changes to their information. I want to look at one last function before I conclude the article, however. It addresses another very common issue - autosubmitting a form when a selection has been made from a select box.

The need to submit a form automatically when a user makes a selection from a select box is fairly common. It could be used to direct a user to some relevant page on a site, or to allow the user to select the first piece of information from a series of questions building to a more specific form (think kelley blue book's website when you're digging down to the type of car you want to get pricing informatin for). Consider the following DHTML function:

 function formsubmit(thisfield) {
  var thisform;
  if (!thisfield)
   return;
  thisform = thisfield.form;
  if (thisfield.selectedIndex) {
   if (thisfield.selectedIndex != 0)
    thisform.submit();
   else
    return;
  }
  else if (thisfield.value != '')
   thisform.submit();
  else
   return;
 }

Usage is as follows:

<select onchange="formsubmit(this);"></select>

The function makes sure that a valid selection was made and submits the form if it has. It is beneficial to set the default selected option to an option with an empty value labelled --SELECT-- or something similar (or whatever suits your application).

Conclusion

While the functions discussed in this article are not especially complex, they are simple to extend and provide short and simple ways to provide some basic enhancements to your web application's forms such as validation, automatic submission, and hilighting of the field in focus.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




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