Form Input Validation JavaScript

Validate the input from your online forms with this free script.


Form Input Validation JavaScript

by Christopher Heng, thesitewizard.com

Many websites, like thesitewizard.com, have a feedback form of some sort so that visitors can make comments to the webmasters. If you have such a form on your site, I'm sure that from time to time, you would have received the results of your form with some essential field (like the email address or the visitor's name, or even the feedback itself) omitted.

Don't worry — this is a common problem. One way around it is to validate the essential fields with a simple JavaScript.

Note: You do not need to do the things mentioned in this article if you have created your feedback form using the Feedback Form Script Wizard. Among other things, the script made by the wizard automatically checks for empty fields.

How to Check for Empty Fields Using JavaScript

To make the web browser check that a field is not empty, you will need to add a call to your validation function when the form is submitted. You do this by adding a "onsubmit" attribute to your FORM tag, like the following (keep it on one line if possible):

<form action="mailto:yourname@example.com" method="post" onsubmit="return checkform(this);">

If the field you want to validate is something like:

<input type="text" name="email" />

then your validation routine will look like the following (put it, say, in the HEAD of your document):

<script language="JavaScript" type="text/javascript">
<!--
function checkform ( form )
{
  // see http://www.thesitewizard.com/archive/validation.shtml
  // for an explanation of this script and how to use it on your
  // own website

  // ** START **
  if (form.email.value == "") {
    alert( "Please enter your email address." );
    form.email.focus();
    return false ;
  }
  // ** END **
  return true ;
}
//-->
</script>

You will need to replace the "email" in both the "name" attribute of the INPUT tag as well as the function checkform to the actual name of the field you want to check. For example, if you want to check a field called "fullname", replace all instances of "email" in the function with "fullname".

The function begins by checking that the field named "email" is not an empty string. If it is, it will call the alert() function to display a dialog box with the message "Please enter your email address." It then calls form.email.focus() to place the text cursor in the email field for the convenience of the visitor and returns "false" to prevent the form from being submitted. On the other hand, if the field was not empty, nothing is executed and the form is submitted as usual.

What if you want to check more than one field? Simply copy everything from the
    // ** START **
line to the
    // ** END **
line and place it immediately below the existing
    // ** END **
line, before the "return true;" statement. Then change all occurences of "email" in the new block to the name of the field you wish to check. You can duplicate that procedure as many times as you have fields to check.

Copyright 2000-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

Form Input Validation JavaScript





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.