Introducing Key Concepts for Form Validation with the DOM - Creating an old-fashioned form validation mechanism
(Page 2 of 5 )
Before I proceed to create a DOM-based application for validating online forms, first allow me to construct a similar system, but in this case using the classic approach. By this I mean I will code some alert methods to notify the user when a particular input box has been left empty. Sounds familiar, right?
Based on the prerequisites that I mentioned above, a complete form validation script applied to a simple contact web page would look similar to this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Alert-based form validator</title>
<script language="javascript">
// validate form
function validateForm(formObj){
var fname=formObj.elements[0];
if(!fname.value){alert('Enter your First Name');fname.
focus();return false};
var lname=formObj.elements[1];
if(!lname.value){alert('Enter your Last Name');lname.
focus();return false};
var email=formObj.elements[2];
if(!email.value){alert('Enter your email address');email.
focus();return false};
var age=formObj.elements[3];
if(!age.value){alert('Enter your age (1-99)');age.
focus();return false};
var postadd=formObj.elements[4];
if(!postadd.value){alert('Enter your postal address');postadd.
focus();return false};
return true;
}
// execute 'ValidateForm()' function when page is loaded
window.onload=function(){
// check if browser is W3CDOM compatible
if(document.getElementById&&document.
getElementsByTagName&&document.createElement){
var theform=document.getElementsByTagName('form')[0];
if(theform){theform.onsubmit=function()
{return validateForm(this)}};
}
}
</script>
</head>
<body>
<div
id="formcontainer">
<form action="processform.php" method="post">
First Name <input type="text" name="fname" /><br />
Last Name <input type="text" name="lname" /><br />
Email <input type="text" name="email" /><br />
Age <input type="text" name="age" /><br />
Postal Address <input type="text" name="paddress" /><br
/>
Comments<br/>
<textarea rows="10" cols="20"></textarea><br />
<input type="submit" name="send" value="Send Data" />
</form>
</div>
</body>
</html>
As you clearly saw, the script listed above performs a simple validation on some of the input boxes that correspond to the contact form coded previously, and not surprisingly it displays a regular "alert" box each time one of these boxes is left blank.
So far, I could say that this form checking mechanism satisfies the requirements of many web applications that don't demand strong client-side validation on their data, in addition to displaying the corresponding error messages as simple alerts. Also, it should be noticed that the script in question is pretty standard, since it's been completely separated from the respective (X)HTML markup and resides neatly on its own behavioral layer.
However, there's still a question surrounding the previous form validation approach: what's wrong with it? Well, to be frank, I have to say...nothing! Definitely, there's nothing bad with using this method for checking user-supplied data, but undoubtedly it can be improved in all sorts of clever ways, including the manner in which all the error messages are shown.
Aside from including more robust validation functions, the previous script could use some of the most popular methods that come with the DOM to manipulate dynamically different nodes of the respective web document, and show the corresponding error notifications as native (X)HTML elements.
Indeed, this method looks much more professional, and best of all it's easy to implement on any web page. Therefore, assuming that you're pretty familiar with the DOM and its methods, in the next few lines I'll teach you how to create a form validation script that shows the error messages as part of the web page in question.
Want to see how this will be achieved? Keep reading.
Next: Using the DOM for validating online forms >>
More JavaScript Articles
More By Alejandro Gervasio
