Form Validation II

By admin in : Tutorial // Feb 5 2008

Continuing on from the first part of the tutorial, we are going to continue through the list of form elements in the order we setup. Next we work on the email address.

else if(document.getElementById("email").value=='' || (document.getElementById("email").value!='' && !emailfilter.test(document.getElementById("email").value))) {
document.getElementById("error_msg").childNodes[0].data='Please enter a valid e-mail address.';
document.getElementById("error_msg").style.display = "block";
document.getElementById("email").focus();
return false;
}

Notice how we handle the email value checking first to see if it is empty to trigger an error and then using the logical operator OR (denoted as ||), we then look at another statement. In that statement we use the logical operator AND (denoted as &&) to trigger an error, and if both the email filed is not empty and the emailfilter.test is not valid then we do what is in between the curly brackets again. The contents are the same as what we described in the first statement.

else if(document.getElementById("phone").value!="" && !phonefilter.test(document.getElementById("phone").value)) {
document.getElementById("error_msg").childNodes[0].data ="Please enter valid phone number";
document.getElementById("error_msg").style.display = "block";
document.getElementById("phone").focus();
return false;
}

The phone is very similar to the email, but nothing is done if no phone number is entered.

else if(document.getElementById("subject").options[document.getElementById("subject").selectedIndex].value=='') {
document.getElementById("error_msg").childNodes[0].data='Please choose a subject address.';
document.getElementById("error_msg").style.display = "block";
document.getElementById("subject").focus();
return false;
}

The subject is a handled a little differently as it is part of a select element. You will notice that the format in the IF statement changes to read the chosen value. Giving the default a value=”" allows the application to recognize when no subject is selected.

else if(document.getElementById("content").value=='') {
document.getElementById("error_msg").childNodes[0].data='Please be sure to enter comments.';
document.getElementById("error_msg").style.display = "block";
document.getElementById("content").focus();
return false;
}else { return true; }
}
//-->

The last item for textarea element is similar to what was done for the name element, and that is all followed the last ELSE which will return a true or you can have it point to another function (like we will do for AJAX call in the final example). If set to true, it will just submit the form.

So now that the script is done, the only thing left is providing a place to display the error. The div/span can be placed where ever you want the error to be displayed. The error will only be displayed when triggered by the javascript.

<div id="error_msg" class="errormsg" style="display:none;">&nbsp;</div>

The trick here is when the id error_message style is defined. The key will be to make the class display none. The javascript will trigger the error to be visible (by changing display:block;) and then the error can be changed back by simply changing the style for id=”error_msg” display:block.

So lets take a look at the finished project. You can view and copy the finished product here.

About the Author

admin has written 22 articles for dingobytes.

Andrew Alba is a Software Engineer who recently relocated to Minneapolis-St Paul area after living in NW Minnesota for two decades. Andrew is currently employed with Internet Broadcasting Systems in St Paul, MN after spending almost five years with Interive Media Group in Fargo, ND. Andrew enjoys developing solutions using CFML, JavaScript, AJAX, PHP and anything else he can steal from the web.