How to do Javascript Validation
a complete example how to store form value into variable and do conditions for the validation
Add Comment
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Form</title>
<style>
body{
font-family:Arial;
font-size:14px;
}
.class1
{
width: 700px;
margin:auto;
padding:20px;
}
</style>
<script type="text/javascript">
function validtionScript(){
var ageGroup = document.forms[0].age.value;
var cltype = document.forms["menssurvey"]["howyoufeel"].value;
var cc = document.forms["menssurvey"]["cloth_type"];
for(i=0;i<cc.length; i++){
console.log(cc[i].value);
console.log(cc[i].checked);
if(cc[i] == 'true'){
} else {
var gee = document.getElementById('getDress');
gee.style.display = "block";
gee.style.color = "#ff0000";
return false;
}
}
console.log(cltype);
return false;
}
</script>
</head>
<body class="class1">
<div style="height:35px; background-color:#827E7E;"><h2 align="center">Men's Survey</h2></div>
<table cellpadding="10" cellspacing="10" bgcolor="#827B7B" width="100%">
<form name="menssurvey" id="msurvey" method="get" action="phpcode.php" enctype="multipart/form-data" >
<tr>
<td>Age group:</td>
<td><select name="age">
<option value="">Select</option>
<option value="16">16</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select></td>
</tr>
<tr>
<td>How do you like to get dressed</td>
<td>
<p id="getDress" style="display:none">Please seclect atleast one value</p>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="25%" align="left" valign="top"><input type="checkbox" name="cloth_type" value="funky">Funky</td>
<td width="25%" align="left" valign="top"><input type="checkbox" name="cloth_type" value="formal">Formal</td>
<td width="25%" align="left" valign="top"><input type="checkbox" name="cloth_type" value="casual">Casual</td>
<td width="25%" align="left" valign="top"><input type="checkbox" name="cloth_type" value="all">All the above</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Express the feel when you wear new dress</td>
<td><textarea name="howyoufeel" rows="4" cols="50"></textarea></td>
</tr>
<tr>
<td>Which one you like more?</td>
<td><input type="radio" name="stitch_type" value="stitched">Stitched
<input type="radio" name="stitch_type" value="readymade"> Ready made</td>
</tr>
<tr><td>Choice of dress color</td>
<td><input type="checkbox" name="cloth_color" value="blue">Blue
<input type="checkbox" name="cloth_color" value="green">Green
<input type="checkbox" name="cloth_color" value="red">Red
<input type="checkbox" name="cloth_color" value="yellow">Yellow
<input type="checkbox" name="cloth_color" value="white">White
<input type="checkbox" name="cloth_color" value="brown">Brown</td>
</tr>
<tr>
<td>Shirt Size</td>
<td>
<select name="cloth_size">
<option value="">Select</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
</select>
</td>
</tr>
<tr>
<td>Annual Salary</td>
<td><select name="salary">
<option value="">Select</option>
<option value="300000">300000</option>
<option value="400000">400000</option>
<option value="500000">500000</option>
<option value="600000">600000</option>
<option value="700000">700000</option>
</select>
</td>
</tr>
<tr><td>How ofte do you Shop?</td>
<td><input type="checkbox" name="shoping_details" value="daily">Daily
<input type="checkbox" name="shoping_details" value="weekly">Weekly
<input type="checkbox" name="shoping_details" value="monthly">Monthly
<input type="checkbox" name="shoping_details" value="occasionally">Occasionlly
</tr>
<tr><td>How much do you spend monthly?</td>
<td><input type="radio" name="spend_monthly" value="0to1000">0 - 1000
<input type="radio" name="spend_monthly" value="1000to3000">1000 - 3000
<input type="radio" name="spend_monthly" value="3000to5000">3000 - 5000
<input type="radio" name="spend_monthly" value="5000to10000">5000 - 10000
</td>
</tr>
<tr>
<td>Whom do you shop for?</td>
<td>
<input type="checkbox" name="shop_for" value="yourself">Yourself
<input type="checkbox" name="shop_for" value="family">Family
<input type="checkbox" name="shop_for" value="friends">Friends
<input type="checkbox" name="shop_for" value="lover">Lover
<input type="checkbox" name="shop_for" value="others">Others
</td>
</tr>
<tr>
<td>Whom do you shop for?</td>
<td>
<input type="submit" onClick="return validtionScript()" name="submit_btn" value="submit" />
</td>
</tr>
</form>
</table>
</body>
</html>
