Skip to content

Commit 181a607

Browse files
scbushan05scbushan05
committed
Initial commit
0 parents  commit 181a607

File tree

2 files changed

+165
-0
lines changed

2 files changed

+165
-0
lines changed

‎register.html

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery Validation - Example</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
8+
<style>
9+
.error{
10+
color: red;
11+
font-style: italic;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<div class = "container">
17+
<div class = "col-md-6 col-md-offset-3">
18+
<div class = "panel panel-primary">
19+
<div class = "panel-heading">
20+
Registration
21+
</div>
22+
<div class = "panel-body">
23+
<form id = "registration">
24+
<input type = "text" class = "form-control" name = "username" placeholder = "Username"/>
25+
<br/>
26+
<input type = "text" class = "form-control" name = "email" placeholder = "Email"/>
27+
<br/>
28+
<input type = "password" class = "form-control" name = "password" placeholder = "Password" id = "password"/>
29+
<br/>
30+
<input type = "password" class = "form-control" name = "confirm" placeholder = "Confirm Password"/>
31+
<br/>
32+
<input type = "text" class = "form-control" name = "fname" placeholder = "First Name"/>
33+
<br/>
34+
<input type = "text" class = "form-control" name = "lname" placeholder = "Last Name"/>
35+
<br/>
36+
<div class = "gender">
37+
<label class="radio-inline"><input type="radio" name="gender" class = "form-contorl"/>Male</label>
38+
<label class="radio-inline"><input type="radio" name="gender" class = "form-contorl"/>Female</label>
39+
</div>
40+
<br/>
41+
42+
<div class = "hobbies">
43+
<label class="checkbox-inline"><input type="checkbox" name = "hobbies">Cricket</label>
44+
<label class="checkbox-inline"><input type="checkbox" name = "hobbies">Football</label>
45+
<label class="checkbox-inline"><input type="checkbox" name = "hobbies">Hockey</label>
46+
<label class="checkbox-inline"><input type="checkbox" name = "hobbies">Tennis</label>
47+
</div>
48+
<br/>
49+
<select class = "form-control" name = "country">
50+
<option value="0" selected="" disabled="">--SELECT--</option>
51+
<option>India</option>
52+
<option>Australia</option>
53+
<option>Japan</option>
54+
<option>China</option>
55+
<option>South Africa</option>
56+
</select>
57+
<br/>
58+
<textarea class = "form-control" name = "address" placeholder="Address"></textarea>
59+
<br/>
60+
<button type = "submit" class = "btn btn-primary">Submit</button>
61+
</form>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
67+
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
68+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
69+
<script src="register.js"></script>
70+
</body>
71+
</html>

‎register.js

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
jQuery.validator.addMethod("noSpace", function(value, element) {
2+
return value == '' || value.trim().length != 0;
3+
}, "No space please and don't leave it empty");
4+
jQuery.validator.addMethod("customEmail", function(value, element) {
5+
return this.optional( element ) || /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test( value );
6+
}, "Please enter valid email address!");
7+
$.validator.addMethod( "alphanumeric", function( value, element ) {
8+
return this.optional( element ) || /^\w+$/i.test( value );
9+
}, "Letters, numbers, and underscores only please" );
10+
var $registrationForm = $('#registration');
11+
if($registrationForm.length){
12+
$registrationForm.validate({
13+
rules:{
14+
username: {
15+
required: true,
16+
alphanumeric: true
17+
},
18+
email: {
19+
required: true,
20+
customEmail: true
21+
},
22+
password: {
23+
required: true
24+
},
25+
confirm: {
26+
required: true,
27+
equalTo: '#password'
28+
},
29+
fname: {
30+
required: true,
31+
noSpace: true
32+
},
33+
lname: {
34+
required: true,
35+
noSpace: true
36+
},
37+
gender: {
38+
required: true
39+
},
40+
hobbies: {
41+
required: true
42+
},
43+
country: {
44+
required: true
45+
},
46+
address: {
47+
required: true
48+
}
49+
},
50+
messages:{
51+
username: {
52+
required: 'Please enter username!'
53+
},
54+
email: {
55+
required: 'Please enter email!',
56+
email: 'Please enter valid email!'
57+
},
58+
password: {
59+
required: 'Please enter password!'
60+
},
61+
confirm: {
62+
required: 'Please enter confirm password!',
63+
equalTo: 'Please enter same password!'
64+
},
65+
fname: {
66+
required: 'Please enter first name!'
67+
},
68+
lname: {
69+
required: 'Please enter last name!'
70+
},
71+
country: {
72+
required: 'Please select country!'
73+
},
74+
address: {
75+
required: 'Please enter address!'
76+
}
77+
},
78+
errorPlacement: function(error, element)
79+
{
80+
if (element.is(":radio"))
81+
{
82+
error.appendTo(element.parents('.gender'));
83+
}
84+
else if(element.is(":checkbox")){
85+
error.appendTo(element.parents('.hobbies'));
86+
}
87+
else
88+
{
89+
error.insertAfter( element );
90+
}
91+
92+
}
93+
});
94+
}

0 commit comments

Comments
 (0)