"Registration form with validation using Jquery"
Bootstrap 3.3.0 Snippet by ranjeetscience

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div class="row">
<div class="col-md-6 col-sm-12 col-lg-6 col-md-offset-3">
<div class="panel panel-primary">
<div class="panel-heading">Enter Your Details Here
</div>
<div class="panel-body">
<form name="myform">
<div class="form-group">
<label for="myName">First Name *</label>
<input id="myName" name="myName" class="form-control" type="text" data-validation="required">
<span id="error_name" class="text-danger"></span>
</div>
<div class="form-group">
<label for="lastname">Last Name *</label>
<input id="lastname" name="lastname" class="form-control" type="text" data-validation="email">
<span id="error_lastname" class="text-danger"></span>
</div>
<div class="form-group">
<label for="age">Age *</label>
<input id="age" name="age" class="form-control" type="number" min="1" >
<span id="error_age" class="text-danger"></span>
</div>
<div class="form-group">
<label for="dob">Date Of Birth *</label>
<input type="date" name="dob" id="dob" class="form-control">
<span id="error_dob" class="text-danger"></span>
</div>
<div class="form-group">
<label for="gender">Gender</label>
<select name="gender" id="gender" class="form-control">
<option selected>Male</option>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
.palel-primary
{
border-color: #bce8f1;
}
.panel-primary>.panel-heading
{
background:#bce8f1;
}
.panel-primary>.panel-body
{
background-color: #EDEDED;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function(){
$flag=1;
$("#myName").focusout(function(){
if($(this).val()==''){
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_name").text("* You have to enter your first name!");
}
else
{
$(this).css("border-color", "#2eb82e");
$('#submit').attr('disabled',false);
$("#error_name").text("");
}
});
$("#lastname").focusout(function(){
if($(this).val()==''){
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_lastname").text("* You have to enter your Last name!");
}
else
{
$(this).css("border-color", "#2eb82e");
$('#submit').attr('disabled',false);
$("#error_lastname").text("");
}
});
$("#dob").focusout(function(){
if($(this).val()==''){
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_dob").text("* You have to enter your Date of Birth!");
}
else
{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: