<head>
<title>Validation Form in HTML and JavaScript </title>
<script language="javascript">
//Start JavaScript Function
function verify() {
//for field must take some input
if (document.form1.name.value == "") {
alert("Please Enter Your Name");
document.form1.name.focus();
return false;
}
//for field must take some input
if (document.form1.email.value == "") {
alert("Please Enter Your Email");
return false;
}
// for field must take some input
if (document.form1.age.value == "") {
alert("Please Enter Your Age");
document.form1.age.focus();
return false;
}
// alert thrown when age limit is below 18 and above 60
if (document.form1.age.value < 18 || document.form1.age.value > 60) {
alert("Please Enter Your Age Between 18 and 60");
document.form1.age.focus();
return false;
}
// Gender must be selected
if (document.form1.gender[0].checked == false &&
document.form1.gender[1].checked == false) {
alert("Please Select Your Gender");
document.form1.gender.focus();
return false;
}
// At least one checkbox must be checked
if (document.form1.language1.checked == false &&
document.form1.language2.checked == false &&
document.form1.language3.checked == false) {
alert("Please Select Atleast One Language");
return false;
}
//Country must be chosed
if (document.form1.country.value == "") {
alert("Please Select Your Country");
document.form1.country.focus();
return false;
}
//field must take some input
if (document.form1.myaddress.value == "") {
alert("Please Enter Your Address");
document.form1.myaddress.focus();
return false;
}
//field must take some input
if (document.form1.u_name.value == "") {
alert("Please Enter Your Username");
document.form1.u_name.focus();
return false;
}
//field must take some input
if (document.form1.pass.value == "") {
alert("Please Enter Your Password");
document.form1.pass.focus();
return false;
}
//password length must be greater than 5 characters
if (document.form1.pass.value.lenght < 6) {
alert("Please Enter a Password more Than 5 Characters");
document.form1.pass.focus();
return false;
}
// for field must take some input
if (document.form1.r_pass.value == "") {
alert("Please Re-type Your Password");
document.form1.r_pass.focus();
return false;
}
//password and confirm password must matched
if ((document.form1.pass.value) != (document.form1.r_pass.value)) {
alert("Your Password Does Not Match");
document.form1.r_pass.value == "";
document.form1.r_pass.focus();
return false;
}
return( true );
}
</script>
</head>
<body>
<h1 align="center"> Validation Form</h1>
<form method="POST" action="#" name="form1">
<!-- Creating Table, having 11rows and 2 columns. -->
<table border="2" align="center" cellpadding="9" bgcolor="pink">
<!-- Start First Row -->
<tr>
<!-- Creating First Column -->
<td><strong>Name:</strong></td>
<!-- Creating Second Columns -->
<td>
<!-- TextBox -->
<input type="text" name="name"/>
</td>
<!-- Close First Row -->
</tr>
<!-- Creting First Columns -->
<td><strong>Email:</strong></td>
<!-- Creating Second Columns -->
<td>
<!-- Textbox -->
<input type="text" name="email"/>
</td>
<!-- Close Second row -->
</tr>
<tr>
<td><strong>Age:</strong></td>
<td>
<!-- Textbox -->
<input type="text" name="age" size="2"/>
</td>
</tr>
<tr>
<td><strong>Gender:</strong></td>
<td>
<!-- Radio Butong -->
<input type="radio" name="gender" value="Male"/>Male
<input type="radio" name="gender" value="Female"/>Female
</td>
</tr>
<tr>
<td><strong>Language:</strong></td>
<td>
<!-- Check box -->
<input type="checkbox" name="language1" value="Arabic"/>Arabic
<input type="checkbox" name="language2" value="English"/>English
<input type="checkbox" name="language3" value="Urdu"/>Urdu
</td>
</tr>
<tr>
<td><strong>Country:</strong></td>
<td>
<!-- Combo Box -->
<select name="country"/>
<option value="" selected/>
--Select--
<option value="pakistan"/>
Pakistan
<option value="saudi"/>
Saudi Arabia
<option value="beangladesh"/>
Beangladesh
<option value="srilanka"/>
Srilanka
<option value="indi"/>
India
</select>
</td>
</tr>
<tr>
<td><strong>Address:</strong></td>
<td>
<!-- TextArea -->
<textarea rows="5" cols="20" name="myaddress"/></textarea>
</td>
</tr>
<tr>
<td><strong>Username:</strong></td>
<td>
<!-- Textbox -->
<input type="text" name="u_name"/>
</td>
</tr>
<tr>
<td><strong>Password:</strong></td>
<td>
<!-- Password Field -->
<input type="password" name="pass"/>
</td>
</tr>
<tr>
<td><strong>Re-type Password:</strong></td>
<td>
<!-- Password Field -->
<input type="password" name="r_pass"/>
</td>
</tr>
<tr align="center">
<td>
<!--Submit Button, Function verify need to be called when we processsubmit button-->
<input type="submit" value="Submit" onClick="return (verify());"/>
</td>
<td>
<!--Reset Button-->
<input type="reset">
</td>
</tr>
<!--Table Close-->
</table>
<!--Form Close -->
</form>
</body>
</html>
Real Translator Jobs - New Top Offer! - $100 Bonus To New Affiliates! (view mobile)
No comments :
Post a Comment