Javascript form validation the easy way

Often you need to validate a form before submission.

I created a basic set of JavaScript functions that make the alert process to the user more user friendly. You see there are so many web forms that wait until the page is posted before validation. This frustrated me a lot and often returning back to the previous page all the information is lost and you need to type it again.

Well to stop your users getting upset, you can use this code to help with html form validation.

The code is simple and effective and easy to understand and edit. There are far more complex methods, but I think that this will do you well as it is easy to find, edit and debug. We all know how frustrating it can be to debug complex JavaScript functions.

Here is some sample code below:

You can also check out other code at http://www.calaman.com

You can demo it at
http://www.connectel.co.uk/recruit/recruit_register.asp
try to submit the form without entering any fields

Regards, ametcalf@caneti.com

Code

<SCRIPT LANGUAGE="Javascript">
function ValidateForm(thisForm) {
 //alert('in validation');
 var bolValidForm = true
 var strErrorMessage = "You have not filled in some required fieldsrnrn"
 var objGiveFocusTo = null;

 if (thisForm.Email.value=="" || thisForm.Email.value.indexOf("@") <=0 || 
thisForm.Email.value.indexOf(".",thisForm.Email.value.indexOf("@"))<=0) {
  strErrorMessage += "You must enter a valid email address.rn";
  if (objGiveFocusTo == null){objGiveFocusTo = thisForm.Email};
  bolValidForm = false;
 }

 if (thisForm.UserName.value=="") {
  strErrorMessage += "You must enter a username.rn";
  if (objGiveFocusTo == null){objGiveFocusTo = thisForm.UserName};
  bolValidForm = false;
 }
 
  
 if (thisForm.Password.value=="" || thisForm.Password.value.length < 5) {
  strErrorMessage += "You must choose a password of at least 5 characters.rn";
  if (objGiveFocusTo == null){objGiveFocusTo = thisForm.Password};
  bolValidForm = false;
 }

 if (thisForm.CPassword.value=="") {
  strErrorMessage += "You must confirm your password.rn";
  if (objGiveFocusTo == null){objGiveFocusTo = thisForm.CPassword};
  bolValidForm = false;
 }

 if (thisForm.CPassword.value != thisForm.Password.value) {
  strErrorMessage += "Your confirmed password does not match your password.rn";
  if (objGiveFocusTo == null){objGiveFocusTo = thisForm.CPassword};
  bolValidForm = false;
 }
 
 
      //This could be a select validation if the select option value = ""
      
 if (thisForm.Referral.value=="") {
  strErrorMessage += "You must enter how you were referred to us.rn";
  if (objGiveFocusTo == null){objGiveFocusTo = thisForm.Referral};
  bolValidForm = false;
 }


      //You could also use 
      var list = thisForm.Referral;
   // if an option is not selected
     if (list.selectedIndex == 0) 
     {
           strErrorMessage += "You must enter how you were referred to us.rn";
           if (objGiveFocusTo == null){objGiveFocusTo = thisForm.Referral};
           bolValidForm = false;
     }


      //Check boxes
      if (thisForm.WantRelocation[0].checked==false && 
thisForm.WantRelocation[1].checked==false) 
  {
   strErrorMessage += "You must choose a relocation type.rn";
   if (objGiveFocusTo == null){objGiveFocusTo = thisForm.WantRelocation[0]};
   bolValidForm = false;
  }


 
 if (!bolValidForm) {
  //alert('failed');
  alert(strErrorMessage);
  objGiveFocusTo.focus();
 }
return bolValidForm;
}
</SCRIPT>



To call the function edit the form tag to call lthe function on submit

<FORM NAME="form" Action="#" METHOD="POST" onSubmit="return ValidateForm(this)">


PS. To get an image to validate on post use code below, it will then 
trigger the above form onSubmit event

<input type="image" name="submitdetails" border="0" src="/images/next.gif" width="57" height="21">