Form validation Using Javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Registration Form</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
function validateForm()
{
var x = document.forms["myForm"]["name"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
var y = document.forms["myForm"]["email"].value;
if (y == "") {
alert("Email must be filled out");
return false;
}
var z = document.forms["myForm"]["mobileno"].value;
if (z == "") {
alert("Mobile No must be filled out");
return false;
}
var c = document.forms["myForm"]["gender"].value;
if (c == "") {
alert("Gender must be select");
return false;
}
var a = document.forms["myForm"]["address"].value;
if (a == "") {
alert("Address must be filled out");
return false;
}
var b = document.forms["myForm"]["department"].value;
if (b == "") {
alert("Department must be select");
return false;
}
}
</script>
</head>
<body style="font-family:Verdana, Geneva, sans-serif">
<br />
<br />
<br />
<br />
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><center>Student Registration Form</center></h3>
</div>
<div class="panel-body">
<form name="myForm" onsubmit="return validateForm()" method="post">
<table class="table">
<tr>
<td>Name</td>
<td><input type="text" name="name" class="form-control"/></td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" name="email" class="form-control"/></td>
</tr>
<tr>
<td>Mobile No.</td>
<td><input type="tel" name="mobileno" class="form-control" maxlength="10" pattern="[789][0-9]{9}" /></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" name="gender" value="male" />Male
<input type="radio" name="gender" value="female" />Female</td>
</tr>
<tr>
<td>Address</td>
<td><textarea rows="3" cols="4" name="address" class="form-control"></textarea></td>
</tr>
<tr>
<td>Department</td>
<td>
<select class="form-control" name="department">
<option value="">Select Department</option>
<option value="Computer">Computer</option>
<option value="Mechanical">Mechanical</option>
<option value="Inforamtion Technology">Inforamtion Technology</option>
<option value="Electrical">Electrical</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td ><input type="submit" name="btn-submit" value="Submit" class="btn btn-success" />
<input type="reset" name="btn-cancel" value="Cancel" class="btn btn-danger"/></td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Registration Form</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
function validateForm()
{
var x = document.forms["myForm"]["name"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
var y = document.forms["myForm"]["email"].value;
if (y == "") {
alert("Email must be filled out");
return false;
}
var z = document.forms["myForm"]["mobileno"].value;
if (z == "") {
alert("Mobile No must be filled out");
return false;
}
var c = document.forms["myForm"]["gender"].value;
if (c == "") {
alert("Gender must be select");
return false;
}
var a = document.forms["myForm"]["address"].value;
if (a == "") {
alert("Address must be filled out");
return false;
}
var b = document.forms["myForm"]["department"].value;
if (b == "") {
alert("Department must be select");
return false;
}
}
</script>
</head>
<body style="font-family:Verdana, Geneva, sans-serif">
<br />
<br />
<br />
<br />
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><center>Student Registration Form</center></h3>
</div>
<div class="panel-body">
<form name="myForm" onsubmit="return validateForm()" method="post">
<table class="table">
<tr>
<td>Name</td>
<td><input type="text" name="name" class="form-control"/></td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" name="email" class="form-control"/></td>
</tr>
<tr>
<td>Mobile No.</td>
<td><input type="tel" name="mobileno" class="form-control" maxlength="10" pattern="[789][0-9]{9}" /></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" name="gender" value="male" />Male
<input type="radio" name="gender" value="female" />Female</td>
</tr>
<tr>
<td>Address</td>
<td><textarea rows="3" cols="4" name="address" class="form-control"></textarea></td>
</tr>
<tr>
<td>Department</td>
<td>
<select class="form-control" name="department">
<option value="">Select Department</option>
<option value="Computer">Computer</option>
<option value="Mechanical">Mechanical</option>
<option value="Inforamtion Technology">Inforamtion Technology</option>
<option value="Electrical">Electrical</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td ><input type="submit" name="btn-submit" value="Submit" class="btn btn-success" />
<input type="reset" name="btn-cancel" value="Cancel" class="btn btn-danger"/></td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</body>
</html>
Comments
Post a Comment