Validation of form before Submit

Discussion in 'JavaScript' started by MSK7, Feb 20, 2009.

0
  1. #1
    Hello all,

    I am beginner inthe programming , & I am trying to apply validation for different fields of a form, so that a user can get alert messages instantly at the time of mistake as if any form fields are empty or any Invalid values are entered. My validation is not working systematically & properly,
    the alert messages hangs the data entering process & some fields does not
    throw any alert messages & the process jumps over the remaining empty fields.
    Please help me so that the validation works systematically & properly
    & errors can be removed , before submitting the form.

    Here is my code:-


    

<html>
<head>
<script type="text/javascript">

function checkName()
{ 
if (form2.name.value=="")
{
alert("Please enter the Full Name"); 
document.form2.name.focus();
document.form2.name.select();
return false;
}


if (!isNaN(document.getElementById('name').value)) 
{
alert("Invalid numeric value entered! Please enter the Valid Name");
document.form2.name.focus();
document.form2.name.select();

return false;
}

return true ;
}


function checkAge()
{ 

if (form2.age.value=="" ) 
{
alert("Please enter the Age"); 
document.form2.age.focus();
document.form2.age.select();
return false;
}


var x = document.form2.age.value;

if(isNaN(x)||x.indexOf(" ")!=-1)
{
alert("The Age entered is not a Numeric value. Please check and try again");
document.form2.age.focus();
document.form2.age.select();
return false; 
}


if ( document.form2.age.value > 99 ) 
{
alert("Age must be numeric & cannot be more than 2 digits"); 
document.form2.age.focus();
document.form2.age.select();
return false;
}

return true;
}

function checkGender()
{
if(!form2.gender[0].checked && !form2.gender[1].checked)
{
alert("Please Select your Gender"); 
document.form2.gender.focus();
return false;
}

return true;
}


function checkMobile()
{

if (form2.mobile.value=="")
{
alert("Please enter the Mobile number");

return false;
}

var y = document.form2.mobile.value; 

if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("The Mobile number you Entered is not a Numeric value. Please check and try again");

return false; 
} 


if (y.charAt(0)!="9")
{
alert("The mobile number must start with 9 ");

return false
}


if (y.length<10||y.length>10)
{
alert("The Mobile number you Entered is not 10 digit number. Please enter only 10 digit number");

return false;
}

return true;
}


function checkCity()
{
if (form2.city.value=="")
{
alert("Please enter the name of City");
document.form2.city.select();
document.form2.city.focus();
return false;
} 

if (!isNaN(document.getElementById('city').value)) 
{
alert("Invalid numeric value entered ! Please enter Valid Name");
document.form2.city.select();
document.form2.city.focus();
return false;
}

return true;
} 


function checkCountry()
{

if (form2.selectname.value=="select country")
{
alert("Please Select a Country from List");
document.form2.country.select();
document.form2.country.focus();
return false;
}

return true;
} 


function checkHobbies()
{
if (!form2.hobbies[0].checked && !form2.hobbies[1].checked && !form2.hobbies[2].checked ) 
{
alert("Please Select at least any one Hobby"); 
document.form2.hobbies.focus();
return false;
} 

return true;
}

function checkWebsite()
{

if (form2.website.value=="")
{
alert("Please Enter your Website ");
document.form2.website.select();
document.form2.website.focus();

return false;
}

if (!isNaN(document.getElementById('website').value)) 
{
alert("Invalid numeric value entered ! Please enter valid name for Website");
document.form2.website.select();
document.form2.website.focus();
return false;
}

return true;
}


function checkEmail()
{

AtPos = document.form2.email.value.indexOf("@")

StopPos = document.form2.email.value.lastIndexOf(".")

if (form2.email.value=="")
{ 
alert("Please enter the Email Address");
document.form2.email.select()
document.form2.email.focus();
return false;
}

if (!isNaN(document.getElementById('email').value)) 
{
alert("Invalid numeric value entered ! Please enter the Valid Email");
document.form2.name.select();
document.form2.name.focus();
return false;
}

if (AtPos == -1 || StopPos == -1) 
{
alert("Not a valid email address");
document.form2.email.select()
document.form2.email.focus();
return false;
}

if (StopPos < AtPos)
{
alert("Not a valid email address");
document.form2.email.select()
document.form2.email.focus();
return false;
}

if (StopPos - AtPos == 1) 
{
alert("Not a valid email address");
document.form2.email.select()
document.form2.email.focus();
return false;
}

return true;
}


function checkMessage()
{
var $comment = document.form2.comment;

if ($comment.value == "")
{
window.alert("Please enter the Message");
$comment.select();
$comment.focus();
return false;
} 

return true;
} 


</script>
</head> 



<body>


<form name="form2" id="form2" action="infosubmit2.php" method="post" >

<table frame border="4" align="center" cellpadding ="20" cellspacing="20" >



<tr> 
<td> <br> Name : <input type="text" name="name" id="name" onblur = "return checkName()" onchange = "return checkName()" onkeyup = "return checkName()" size="40" /> <br /> </td> </tr> 

<tr>
<td> <br> Age : <input type="text" name="age" id="age" onblur= "return checkAge()" onchange = "return checkAge()" onkeyup = "return checkAge()" size="6" /> <br /> </td> </tr>


<tr> 

<td> <br> Gender : <input type = "radio" name= "gender" onblur="checkGender()" value = "male"> Male 

<input type = "radio" name= "gender" onblur=="checkGender()" value = "female"> Female <br /> </td> </tr>



<tr>

<td> <br> Mobile : <input type = "text" name ="mobile" onblur = "return checkMobile()" onkeyup= "return checkMobile()" size="20" /> <br /> </td> </tr> 


<tr>
<td> <br> City : <input type = "text" name ="city" onblur = "return checkCity()" onkeyup = "return checkCity()" size="25" /> <br /> </td> </tr> 




<tr> 

<td> <p> Country :
<select name="selectname" onblur = "return checkCountry()" > 

<option value="select country"> Select Country </option value > 


<?php

$result = mysql_query('select * from info2.countries2');
while ($row = mysql_fetch_array($result))
{
?>
<option value="<? echo $row['countryName']; ?>"><? echo $row['countryName']; ?></option>
<? } ?>
</select>

<p>&nbsp;</p> </td> </tr>



<tr>
<td> <br> Hobbies : <input type = "checkbox" name= "hobbies" onblur = "return checkHobbies()" value="movies"> Movies 

<input type = "checkbox" name= "hobbies" onblur = "return checkHobbies()" value="reading"> Reading

<input type = "checkbox" name= "hobbies" onblur = "return checkHobbies()" value="sports"> Sports <br /> </td> </tr> 


<tr> 
<td> <br> WebSite : <input type = "text" name="website" id="website" onblur = "return checkWebsite()" onkeyup = "return checkWebsite()" size ="35" /> <br /> </td> </tr>


<tr>
<td> <br> Email : <input type = "text" name="email" id="email" onblur = "return checkEmail()" onkeyup = "return checkEmail()" size ="38" /> <br /> </td> </tr>


<tr>
<td> <br> Message : <textarea name= "comments" onblur ="return checkMessage()" onkeyup = "return checkMessage()" cols="25" rows="3" id="comments" ></textarea> <br /> </td> </tr>


<tr>
<td> <input type = "submit" name= "submit" id = "submit" value= "Submit"/> 


<input type = "reset" name= "reset" id = "reset" value= "Reset"/> <br /> </td> </tr>


</table> 
</form>
</body>
</html>
    Code (markup):
    In advance
    Thanks & Regards.
     
    MSK7, Feb 20, 2009 IP