Check a form's content before submitting it

Check a form's content before submitting it

With Javascript you can check the contents of a form before submitting it. It is much faster to make the client check the form than the server.

The example below works with Javascript enabled browsers, excluding Netscape Navigator 2 which do not support this technique. All other browsers will just submit the data to the server.

The forms checks the following:

E-mail address must be at least 7 characters long and contain at least one . (period) and @.
Name must be at least 2 characters long.
A rating must be selected.

The code for the above is here:

<form action="something" method="get" OnSubmit="return CheckForm()">
<table>
<tr>
  <td align=right>Your e-mail address:</td>
  <td colspan=2><input type="text" name="email"></td>
</tr>
<tr>
  <td align=right>Your name:</td>
  <td colspan=2><input type="text" name="realname"></td>
</tr>
<tr>
<td align=right>Your rating:</td>
<td colspan=2>
  <input type=radio name="rating" value="1">Awful
  <input type=radio name="rating" value="2">Average
  <input type=radio name="rating" value="3">Great
</td>
<td><input type="submit" value=" Submit "></td>
</tr>
</table>
</form>


<script language=javascript type="text/javascript">
<!--
// Set focus on first element in form -- not supported by Netscape 2
if (!(navigator.userAgent.substring(0,11) == "Mozilla/2.0")) 
   document.forms[0].elements[0].focus();

function CheckForm()
{ if (document.forms[0].email.value.indexOf('@')==-1  || 
      document.forms[0].email.value.indexOf('.')==-1  || 
      document.forms[0].email.value.length <= 7 ) 
  { alert("The e-mail adress you have entered seems to be invalid.\n" + 
          "Please check it again.");     
    document.forms[0].elements[0].select();
    document.forms[0].elements[0].focus();
    return false;
  }

  if (document.forms[0].realname.value.length < 2)
  { alert("Please enter your name.");
    document.forms[0].elements[1].select();
    document.forms[0].elements[1].focus();
    return false;
  }

  if (!document.forms[0].elements[2].checked  &&
      !document.forms[0].elements[3].checked  &&
      !document.forms[0].elements[4].checked )
  { alert("Please select your rating.");
    return false;
  }

  return true;
}
// -->
</script>

You can also check a value immediately after the user leaves a text-field by adding a OnBlur="CheckValue()" to <input> tags. But if the user do not want to fill out the form and clicks another link on the page, he will get the alert!

Affiliate Sites: Funny Videos | Fight Videos | Free Arcade Games