Programming Examples
JavaScript code to validate a Basic html Form
JavaScript code to validate a Basic html Form
Solution<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<script type="text/javascript">
function validate()
{
/*user ID*/
if(document.getElementById('userid_txt').value=="")
{
document.getElementById('userid_txt_sp').innerHTML="Please enter the User ID";
return false;
}
else if(!(document.getElementById('userid_txt').value).match(/^[a-zA-Z][a-zA-Z0-9_]{4,11}$/))
{
document.getElementById('userid_txt_sp').innerHTML="Please enter the valid User ID";
return false;
}
else
{
document.getElementById('userid_txt_sp').innerHTML="";
}
/*password*/
if(document.getElementById('password_txt').value=="")
{
document.getElementById('password_txt_sp').innerHTML="Please enter the Password";
return false;
}
else if((document.getElementById('password_txt').value).length<7 ||(document.getElementById('password_txt').value).length>12 )
{
document.getElementById('password_txt_sp').innerHTML="Please enter the 7 to 12 ";
return false;
}
else
{
document.getElementById('password_txt_sp').innerHTML="";
}
/*User name */
if(document.getElementById('name_txt').value=="")
{
document.getElementById('name_txt_sp').innerHTML="Please enter the Name";
return false;
}
else if(!(document.getElementById('name_txt').value).match(/^[a-zA-Z]+$/))
{
document.getElementById('name_txt_sp').innerHTML="Please enter only Alphabates";
return false;
}
else
{
document.getElementById('name_txt_sp').innerHTML="";
}
/*Countrt Select box */
if(document.getElementById('country_sel').value=="none")
{
document.getElementById('country_sel_sp').innerHTML="Please Select the Country";
return false;
}
else
{
document.getElementById('country_sel_sp').innerHTML="";
}
/*Zip Code */
if(document.getElementById('zip_code').value=="")
{
document.getElementById('zip_code_sp').innerHTML="Please Select the Zip Code";
return false;
}
else if(!(document.getElementById('zip_code').value).match(/^[0-9]{6}$/))
{
document.getElementById('zip_code_sp').innerHTML="Please only 6 Digit ZipCode";
return false;
}
else
{
document.getElementById('zip_code_sp').innerHTML="";
}
if(document.getElementById('email_txt').value=="")
{
document.getElementById('email_txt_sp').innerHTML="Please Select the Email";
return false;
}
else if(!(document.getElementById('email_txt').value).match(/^[a-zA-Z][a-zA-Z0-9_.]+@[a-zA-Z0-9]+.[a-zA-Z0-9]{2,3}$/))
{
document.getElementById('email_txt_sp').innerHTML="Please the Valid Email";
return false;
}
else
{
document.getElementById('email_txt_sp').innerHTML="";
}
/* gender */
if(document.getElementById('male_sex').checked==false && document.getElementById('female_sex').checked==false)
{
document.getElementById('sex_sp').innerHTML="Please Select the Gender";
return false;
}
else
{
document.getElementById('sex_sp').innerHTML="";
}
if(document.getElementById('english').checked==false && document.getElementById('non_english').checked==false)
{
document.getElementById('language_sp').innerHTML="Please check any one option";
return false;
}
else if(document.getElementById('english').checked==true && document.getElementById('non_english').checked==true)
{
document.getElementById('language_sp').innerHTML="Please check Only one option";
return false;
}
else
{
document.getElementById('language_sp').innerHTML="";
}
/*Address*/
if(document.getElementById('address_txt').value=="")
{
document.getElementById('address_txt_sp').innerHTML="";
}
else if(!isNaN(document.getElementById('address_txt').value))
{
document.getElementById('address_txt_sp').innerHTML="Please enter the Alphabates";
return false;
}
else
{
document.getElementById('address_txt_sp').innerHTML="";
}
/*About*/
if(document.getElementById('about_txt').value=="")
{
document.getElementById('about_txt_sp').innerHTML="";
}
else if(!(document.getElementById('about_txt').value).match(/^[a-zA-Z.]+$/))
{
document.getElementById('about_txt_sp').innerHTML="Please enter only Alphabates";
return false;
}
else
{
document.getElementById('about_txt_sp').innerHTML="";
}
}
</script>
<style type="text/css">
.container
{
width:600px;
height:550px;
padding:20px;
-webkit-box-shadow:#000000 2px 2px 2px 2px;
-moz-box-shadow:#000000 2px 2px 2px 2px;
box-shadow:#000000 2px 2px 2px 2px;
margin:auto;
}
.row
{
height:35px;
}
.column
{
min-width:100px;
float:left;
padding-left:10px;
}
.right_align
{
text-align:right;
}
.center_align
{
text-align:center;
}
textarea
{
width:200px;
height:100px;
}
.clear
{
clear:both;
}
.msg
{
color:#ff0000;
}
</style>
</head>
<body onsubmit="return validate()">
<form id="application_frm" name="application_frm">
<div class="container">
<h2>Registration Form</h2>
<div class="row">
<div class="column right_align"><label for="userid_txt">User id:</label></div>
<div class="column"><input type="text" id="userid_txt" name="userid_txt" placeholder="Enter User ID"/><span id="userid_txt_sp" class="msg"></span></div>
</div>
<div class="row">
<div class="column right_align"><label for="password_txt">Password:</label></div>
<div class="column"><input type="password" id="password_txt" name="password_txt" placeholder="Enter password"/><span id="password_txt_sp" class="msg"></span></div>
</div>
<div class="row">
<div class="column right_align"><label for="name_txt">Name:</label></div>
<div class="column"><input type="text" id="name_txt" name="name_txt" placeholder="Enter your name"/><span id="name_txt_sp" class="msg"></span></div>
</div>
<div class="row">
<div class="column right_align"><label for="address_txt">Address:</label></div>
<div class="column"><input type="text" id="address_txt" name="address_txt" placeholder="Enter your address"/><span id="address_txt_sp" class="msg"></span></div>
</div>
<div class="row">
<div class="column right_align"><label for="country_sel">Country:</label></div>
<div class="column">
<select id="country_sel" name="country_sel">
<option value="none">Select any One</option>
<option value="india">India</option>
<option value="america">America</option>
<option value="england">england</option>
</select><span id="country_sel_sp" class="msg"></span>
</div>
</div>
<div class="row">
<div class="column right_align"><label for="zip_code">ZIP Code:</label></div>
<div class="column"><input type="text" id="zip_code" name="zip_code" placeholder="Enter ZIP-code"/><span id="zip_code_sp" class="msg"></span></div>
</div>
<div class="row">
<div class="column right_align"><label for="email_txt">Email:</label></div>
<div class="column"><input type="text" id="email_txt" name="email_txt" placeholder="Enter your e-mail"/><span id="email_txt_sp" class="msg"></span></div>
</div>
<div class="row">
<div class="column right_align">Sex:</div>
<div class="column">
<span>
<input type="radio" name="sex" value="Male" id="male_sex"/><label for="male_sex">Male</label>
</span>
<span>
<input type="radio" name="sex" value="Female" id="female_sex" /><label for="female_sex">Female</label>
</span>
<span id="sex_sp" class="msg"></span>
</div>
</div>
<div class="row">
<div class="column right_align">Language:</div>
<div class="column">
<span>
<input type="checkbox" name="english" value="english" id="english" checked="checked"/><label for="english">English</label>
</span>
<span>
<input type="checkbox" name="non_english" value="non_english" id="non_english" /><label for="non_english">Non English</label>
</span>
<span id="language_sp" class="msg"></span>
</div>
</div>
<div class="row">
<div class="column right_align"><label for="about_txt">About:</label></div>
<div class="column">
<textarea name="about_txt" id="about_txt"></textarea>
<span id="about_txt_sp" class="msg"></span>
</div>
</div>
<div class="row clear">
<div class="column"> </div>
<div class="column center_align">
<span>
<input type="submit" id="submit_button" name="submit_button" value="Submit"/>
</span>
</div>
</div>
</div>
</form>
</body>
</html>Output/ Explanation: