Validate form fields for no input with JavaScript

Script written by

Description:

Checking that form fields have input is extremely important - having this performed before the form is submitted, client side, before its handled by anything at the backend such as an SQL or MS Access database, is vital and an additional factor in getting accurate input. This code contains functions to check null input and also to check if an email address follows a valid pattern.

Either copy the script into your favourite editor, or download the files

<script language="JavaScript" type="text/javascript">


// Javascript validation functions
// http://www.designplace.org/


//function to check empty fields

function isEmpty(strfield1, strfield2, strfield3) {


//change "field1, field2 and field3" to your field names
strfield1 = document.forms[0].field1.value 
strfield2 = document.forms[0].field2.value
strfield3 = document.forms[0].field3.value

  //name field
    if (strfield1 == "" || strfield1 == null || !isNaN(strfield1) || strfield1.charAt(0) == ' ')
    {
    alert("\"Field 1\" is a mandatory field.\nPlease amend and retry.")
    return false;
    }

  //url field 
    if (strfield2 == "" || strfield2 == null || strfield2.charAt(0) == ' ')
    {
    alert("\"Field 2\" is a mandatory field.\nPlease amend and retry.")
    return false;
    }

  //title field 
    if (strfield3 == "" || strfield3 == null || strfield3.charAt(0) == ' ')
    {
    alert("\"Field 3\" is a mandatory field.\nPlease amend and retry.")
    return false;
    }
    return true;
}


//function to check valid email address
function isValidEmail(strEmail){
  validRegExp = /^[^@]+@[^@]+.[a-z]{2,}$/i;
  strEmail = document.forms[0].email.value;

   // search email text for regular exp matches
    if (strEmail.search(validRegExp) == -1) 
   {
      alert('A valid e-mail address is required.\nPlease amend and retry');
      return false;
    } 
    return true; 
}


//function that performs all functions, defined in the onsubmit event handler

function check(form)){
if (isEmpty(form.field1)){
  if (isEmpty(form.field2)){
    if (isEmpty(form.field3)){
		if (isValidEmail(form.email)){
		  return true;
		}
	  }
  }
}
return false;
}

</script>

In your <form> tag, add onsubmit="return check(this);". Remember to edit the field names above, so that they correspond to your field names that you have defined using name="field".

Preview script (new window)



Remember, if you get stuck or need to ask any questions, register with the forums and tell us about it!

Partners Partners