Hi, In this article we are going to use generic validation for all the texbox and drodown. For this, we are using a specific class for all the control (.reqFeild) to get its value and validate if its is null or 0. I think this is very easy and simple method.
Code and Script are as follows :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="content/bootstrap.min.css" rel="stylesheet" />
<script src="content/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<strong>First Name : </strong>
<input type="text" class="form-control reqField" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<strong>Last Name : </strong>
<input type="text" class="form-control reqField" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<strong>Email : </strong>
<input type="text" class="form-control reqField" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<strong>Address : </strong>
<input type="text" class="form-control reqField" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<strong>Address : </strong>
<input type="text" class="form-control reqField" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<strong>Zip Code : </strong>
<input type="text" class="form-control reqField" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<strong>State : </strong>
<select class="form-control reqField">
<option value="0">Select</option>
<option value="1">Delhi</option>
<option value="2">Uttar Paradesh</option>
<option value="3">Bihar</option>
<option value="5">Hariyana</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<strong>Country : </strong>
<select class="form-control reqField">
<option value="0">Select</option>
<option value="1">India</option>
<option value="2">USA</option>
<option value="3">Pakistan</option>
<option value="4">Sri Lanka</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="submit" id="btnSubmit" class="btn btn-primary" />
</div>
<div class="col-md-6">
<label id="lblError" style="color: red" class="hide">Please fill all the required fields.</label>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$("#btnSubmit").click(function () {
var flag = false;
//Checking all the control using class .reqField. 0 for dropdown and "" for textbox validation
$('.reqField').each(function () {
if ($(this).val() == "0" || $(this).val() == "") {
$(this).css({ "border-color": "#ff0000" });
flag = true;
}
else {
$(this).css({ "border-color": "" });
}
});
// checking flag value if true, lblerror msg will show else remove.
if (flag) {
$("#lblError").removeClass("hide")
return false;
}
else {
$("#lblError").addClass("hide")
}
});
});
</script>
</html>
Code and Script are as follows :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="content/bootstrap.min.css" rel="stylesheet" />
<script src="content/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<strong>First Name : </strong>
<input type="text" class="form-control reqField" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<strong>Last Name : </strong>
<input type="text" class="form-control reqField" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<strong>Email : </strong>
<input type="text" class="form-control reqField" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<strong>Address : </strong>
<input type="text" class="form-control reqField" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<strong>Address : </strong>
<input type="text" class="form-control reqField" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<strong>Zip Code : </strong>
<input type="text" class="form-control reqField" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<strong>State : </strong>
<select class="form-control reqField">
<option value="0">Select</option>
<option value="1">Delhi</option>
<option value="2">Uttar Paradesh</option>
<option value="3">Bihar</option>
<option value="5">Hariyana</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<strong>Country : </strong>
<select class="form-control reqField">
<option value="0">Select</option>
<option value="1">India</option>
<option value="2">USA</option>
<option value="3">Pakistan</option>
<option value="4">Sri Lanka</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="submit" id="btnSubmit" class="btn btn-primary" />
</div>
<div class="col-md-6">
<label id="lblError" style="color: red" class="hide">Please fill all the required fields.</label>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$("#btnSubmit").click(function () {
var flag = false;
//Checking all the control using class .reqField. 0 for dropdown and "" for textbox validation
$('.reqField').each(function () {
if ($(this).val() == "0" || $(this).val() == "") {
$(this).css({ "border-color": "#ff0000" });
flag = true;
}
else {
$(this).css({ "border-color": "" });
}
});
// checking flag value if true, lblerror msg will show else remove.
if (flag) {
$("#lblError").removeClass("hide")
return false;
}
else {
$("#lblError").addClass("hide")
}
});
});
</script>
</html>
Hope, It is helpful to you. Thank You :)
No comments:
Post a Comment