Tags: How to validate
control in JQuery, Validation of controls in a form using JQuery, JQuery
validation for forms.
Today we are going to code for
validation of controls of a form. It very useful when number of controls is not
confirmed in the form.
To do this, copy and paste
following code in your editor like Notepad, Notepad++ or any other and save
file with extension .html.
Code
<!DOCTYPE html>
<html>
<head>
<title>
Validation Testing </title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
var
common = 0 ;
$('.validateform').on('submit',function(e){
firebutton(e)
});// submit close here
$('#btnAnother').on('click',function(e){
firebutton(e)
});// submit close here
function
firebutton(e){
common = 0 ;
$('#ValidationSummary').empty().css('display','none');
$('.need').each(function(i,
j){
var $this = $(this); //
if($this.hasClass('text')){
text($this);
}
if($this.hasClass('radiob')){
radio($this)
}
});//each close here
if(common >0){
$('#ValidationSummary').css('display','block').append(common+'
fields are remaining');
e.preventDefault();
}
}
$('.need').focusin(function(){
$(this).removeClass('error');
});
function
text($this){
if($this.find('input').val().trim()
== '' ){
$this.addClass('error');
common++;
}
}
function
radio($this){
var holdd =
$this.find('input[type="radio"]:checked').length;
if(holdd!= 0){
}
else{
$this.addClass('error');
common++;
}
}
});
</script>
<style>
ul {
list-style: none;
}
.error input {
border: 2px solid red;
color: red;
}
.error2 {
color: red;
}
</style>
</head>
<body>
<form class="validateform">
<div id="ValidationSummary" class="error2" style="display:none"></div>
<table>
<tr class="need
text">
<td>Name
:</td>
<td><input type=text /></td>
</tr>
<tr>
<td>Pet
Name :</td>
<td><input type=text /></td>
</tr>
<tr class="need
text">
<td>Father
Name :</td>
<td><input type=text /></td>
</tr>
<tr class="need
text">
<td>Address
:</td>
<td><input type=text /></td>
</tr>
<tr class="need
radiob">
<td>Gender
:</td>
<td><input type="Radio" /> Male
<input type="Radio" />
FeMale</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Click" /></td>
</tr>
</table>
</form>
</body>
</html>
What
are we doing in this code?
We are checking the controls for
validations by using loop. To achieve this, we have decorated the controls with
two class, i.e., need and text. ‘need’ class
is used to check that in which code validate is to apply. If you see we didn’t use
this class for Pet Name control. Because we don’t want to apply
validation for that control. ‘text’ class
is used to specify that the control is a Textbox. For radio button control we
used ’radiob’ class.
In the above code, we are calling a
function of name ‘firebutton’. I have called this function twice here :
$('.validateform').on('submit',function(e)
And
$('#btnAnother').on('click',function(e)
First calling for submit button click and
second calling is for any button click by using that button’s id. Second
calling is for your experience, I am not using it in this code.
In function ‘firebutton’, there is a
variable of name ‘common’. It is acting as a flag. It is zero by default and
its value will increase if validation error is found.
We are executing a loop for those controls
which are having class name – need. Inside the loop we are checking that
if the control has any class of name text or radiob, It checks
that it is filled/checked or not, if finds error it applies the ‘error’ class
to control.
In the last of code, we check that common
variable is greater than zero or not, if it is greater than zero means error is
present, it will not load the form.
We have created a div of name ValidationSummary, which is used to show validation message. You
can remove it as per requirement.
Points
to remember
·
Don’t forget to add reference of
JQuery File.
·
Add class to the controls for
which you have to apply validation.
Demo Images:
When
form loads
When
click on Click button
When
one Validation field is filled and another are empty
Happy Coding.
Rudra Pratap Singh
Software Engineer
No comments:
Post a Comment