Adding Server-side Capabilities to Form Validation with the DOM - A quick look at the previous form validation script
(Page 2 of 5 )
As usual, first I’d like to show you the complete source code that corresponds to the form validation script that I developed in the previous article, before we make any attempt to code a PHP class that checks user-supplied data on the server. This preceding stage will help you understand more easily how the respective client and server-side modules that make up the application fit together.
Here is the complete definition for the form validation script created in the previous tutorial. Please take a look at the code listing below:
<!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>DOM-based form validator</title>
<script language="javascript">
// validate form
function validateForm(formObj){
valid=true;
var fname=formObj.elements[0];
if(!fname){return};
if(!fname.value){showError(fname,'Enter your First Name')};
var lname=formObj.elements[1];
if(!lname){return};
if(!lname.value){showError(lname,'Enter your Last Name')};
var email=formObj.elements[2];
if(!email){return};
if(!email.value){showError(email,'Enter your email address')};
var age=formObj.elements[3];
if(!age){return};
if(!age.value){showError(age,'Enter your age (1-99)')};
var postadd=formObj.elements[4];
if(!postadd){return};
if(!postadd.value){showError(postadd,'Enter your postal address')};
return valid;
}
// display error messages
function showError(obj,message){
if(!obj.errorNode){
obj.onchange=hideError;
var span=document.createElement('span');
span.className='error';
span.appendChild(document.createTextNode(message));
obj.parentNode.appendChild(span);
obj.errorNode=span;
}
valid=false;
return
}
// hide error messages
function hideError(){
this.parentNode.removeChild(this.errorNode);
this.errorNode=null;
this.onchange=null;
}
// 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>
<style type="text/css">
body{
margin: 0;
padding: 0;
background:#fff;
}
h1{
font: bold 18px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
span{
font: bold 12px Arial, Helvetica, sans-serif;
color: #f00;
margin-left: 10px;
}
ul{
font: bold 12px Arial, Helvetica, sans-serif;
color: #f00;
text-align:center;
}
#formcontainer{
width: 600px;
height: 450px;
background:#eee;
margin-left:auto;
margin-right:auto;
border: 1px solid #ccc;
}
#labelcontainer{
float: left;
width: 200px;
text-align: right;
padding-right: 10px;
}
#labelcontainer p{
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
margin: 10px 0 0 0;
}
#boxcontainer{
float: left;
width: 300px;
}
#boxcontainer p{
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
margin: 4px 0 0 0;
}
</style>
</head>
<body>
<div id="formcontainer">
<form action="<?php echo $_SERVER['PHP_SELF']?>"method="post">
<div id="labelcontainer">
<p>First Name</p>
<p>Last Name</p>
<p>Email</p>
<p>Age</p>
<p>Postal Address</p>
<p>Comments</p>
</div>
<div id="boxcontainer">
<p><input type="text" name="fname" /></p>
<p><input type="text" name="lname" /></p>
<p><input type="text" name="email" /></p>
<p><input type="text" name="age" /></p>
<p><input type="text" name="paddress" /></p>
<p><textarea rows="10" cols="20"></textarea></p>
<p><input type="submit" name="send" value="Send Data" /></p>
</div>
</form>
</div>
</body>
</html>
As you’ll recall, the above source code corresponds to the DOM-based form validation system created in the prior part of the series. Naturally it’s limited to performing client-side validation on the data entered in the respective sample contact form. From this point onward, you can implement the application with its current capabilities, or…you can be more ambitious and learn how to integrate the system with strong data checking functionality provided by a server-side scripting language such as PHP.
Did you decide to take the last approach? Good! Therefore, move on and read the following section, which will be entirely focused on defining an efficient PHP class that neatly complements the previous client-side form validation script.
Next: Adding server-side capabilities to the original application >>
More JavaScript Articles
More By Alejandro Gervasio
