JavaScript Form Validation Example.

By Sergey Skudaev

I used different methods for form validation. THis one I like the most. It takes all fields on the form and walk through.

To see source code, click on the webpage with right mouse button and select view source code.

I like this method, because it works even on fields created by cloning with javascipt. When you create an array of fields by clonning them with JavaScript, you cannot know index of the array for each field. It makes hard to write validate code by reference each field in the array. This method allows to validate all fields on the form. Just use name of the element to identify it.

JavaScript code for validation

<pre>
function valForm()
 {
          var count = 0;
    var elem = document.getElementById('myform').elements;
   for(var i = 0; i < elem.length; i++)
   {
		if((elem[i].value=="")&&(elem[i].name="username"))
		{
		elem[i].style.color="#5C3D00";
		elem[i].style.background="#FFFF99";
		elem[i].style.border="3px solid #ff0000";
		count++;
	    }

if((elem[i].value=="")&&(elem[i].name="firstname"))
		{
				elem[i].style.color="#5C3D00";
				elem[i].style.background="#FFFF99";
				elem[i].style.border="3px solid #ff0000";
				count++;
	    }

if((elem[i].value=="")&&(elem[i].name="lastname"))
		{
						elem[i].style.color="#5C3D00";
						elem[i].style.background="#FFFF99";
						elem[i].style.border="3px solid #ff0000";
						count++;
	    }

if((elem[i].value=="")&&(elem[i].name="email"))
				{
						elem[i].style.color="#5C3D00";
						elem[i].style.background="#FFFF99";
						elem[i].style.border="3px solid #ff0000";
						count++;
	    }

if((elem[i].value=="")&&(elem[i].name="password1"))
		{
						elem[i].style.color="#5C3D00";
						elem[i].style.background="#FFFF99";
						elem[i].style.border="3px solid #ff0000";
						count++;
	    }
	    if((elem[i].value=="")&&(elem[i].name="password2"))
				{
								elem[i].style.color="#5C3D00";
								elem[i].style.background="#FFFF99";
								elem[i].style.border="3px solid #ff0000";
								count++;
	    }

if((elem[i].value=="")&&(elem[i].name="country"))
						{
										elem[i].style.color="#5C3D00";
										elem[i].style.background="#FFFF99";
										elem[i].style.border="3px solid #ff0000";
										count++;
	    }

}

if(count>0)
  		return false;
 }

function toDefault(x)
 {
 x.style.color="black";
 x.style.border="1px solid #aaa";
 x.style.background="#efefef";
 }
</pre>

HTML Form:

<pre>
        <form method="post" id="myform" name="myform" action="<?php echo $_SERVER['PHP_SELF']; ?>" >
<table   style="min-width:50%; margin-left:auto; margin-right:auto; border:1px solid #aaa;">
<tr><td style="text-align:left;"><label class="user">Username:</label>
<input type="text" name="username" value="<? echo $username; ?>"  onFocus="toDefault(this);"/></td></tr>
<tr><td style="text-align:left;"><label class="user">First Name:</label>
<input type="text" name="firstname" value="<? echo $firstname; ?>"  onFocus="toDefault(this);"/></td></tr>
<tr><td style="text-align:left;"><label class="user">Last Name:</label>
<input type="text" name="lastname"  value="<? echo $lastname; ?>"  onFocus="toDefault(this);"/></td></tr>
<tr><td style="text-align:left;"><label class="user">Email:</label>
<input type="text" name="email" value="<? echo $email; ?>"  onFocus="toDefault(this);"/></td></tr>
</td><td style="text-align:left;"><label class="user">Country</label><select name="country" size="1" style="width:200px;" onFocus="toDefault(this);">
<option value="" selected>Select Country</option>
<option value="USA">USA</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
<option value="Italy">Italy</option>
<option value="Spain">Spain</option>
<option value="France">France</option>
</select></td></tr>

<tr><td align="left"><label class="user">Password:</label>
<input type="text" name="password1"  onFocus="toDefault(this);"/></td></tr>
<tr><td align="left"><label class="user">Confirm Password:</label>
<input type="text" name="password2"  onFocus="toDefault(this);"/></td></tr>
<tr><td> </td></tr>
<tr><td style="text-align:center;"><input type="submit" name="submit" value="Save" onClick="return valForm();"/>
</td></tr>
</table>
</form>
    </pre>

<pre>
  <style>
.invalid {

color="#5C3D00";
background="#FFFF99";
border="3px solid #ff0000";

}
</style>
<script>
function valForm()
 {
    var count = 0;
    var elem = document.getElementById('myform').elements;

for(var i = 0; i < elem.length; i++)
   {
        if((elem[i].value=="")&&(elem[i].name="username"))
        {
            elem[i].addClass('invalid');
            count++;
        }

if((elem[i].value=="")&&(elem[i].name="firstname"))
        {
            elem[i].addClass('invalid');
            count++;
        }

if((elem[i].value=="")&&(elem[i].name="lastname"))
        {
            elem[i].addClass('invalid');
            count++;
        }

if((elem[i].value=="")&&(elem[i].name="email"))
        {
            elem[i].addClass('invalid');
            count++;
        }

if((elem[i].value=="")&&(elem[i].name="password1"))
        {
            elem[i].addClass('invalid');
            count++;
        }
        if((elem[i].value=="")&&(elem[i].name="password2"))
        {
            elem[i].addClass('invalid');
            count++;
        }

if((elem[i].value=="")&&(elem[i].name="country"))
        {
             elem[i].addClass('invalid');
             count++;
        }

}
  		if(count>0)
  		return false;
 }

function toDefault(x)
 {
 x.removeClass('invalid')
 }
 </script>

</pre>

My eBooks on Amazon.com

US UK BR CA

Computer Programming Web programming Tips

JavaScript Form Validation Example.

My eBooks on Amazon.com