Skip to content

Commit 349fc57

Browse files
gwhenneArkni
gwhenne
authored and
Arkni
committed
Demo: Add sample code for Bootstrap 4 usage (jquery-validation#2173)
1 parent b9a7a8d commit 349fc57

File tree

1 file changed

+164
-0
lines changed

1 file changed

+164
-0
lines changed

‎demo/bootstrap/index-bs4.html

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>JQuery-validation demo | Bootstrap</title>
5+
6+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
7+
8+
<script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script>
9+
<script type="text/javascript" src="../../dist/jquery.validate.js"></script>
10+
</head>
11+
<body>
12+
<div class="container">
13+
<div class="row">
14+
<div class="col-sm-8 offset-sm-2">
15+
<div class="border-bottom mb-4 mt-4 pb-2">
16+
<div class="alert alert-info" role="alert">
17+
<h6>This demo shows how to integrate JQuery-validation and the Bootstrap 4 framework.</h4>
18+
<ul>
19+
<li><a href="https://getbootstrap.com/" class="alert-link">Bootstrap home project</a>.</li>
20+
</ul>
21+
</div>
22+
</div>
23+
24+
<div class="card">
25+
<div class="card-header">
26+
<h6 class="card-text">Simple Form</h3>
27+
</div>
28+
<div class="card-body">
29+
<form id="signupForm" method="post" class="form-horizontal" action="">
30+
<div class="form-group row">
31+
<label class="col-sm-4 col-form-label" for="firstname">First name</label>
32+
<div class="col-sm-6">
33+
<input type="text" class="form-control" id="firstname" name="firstname" placeholder="First name" />
34+
</div>
35+
</div>
36+
37+
<div class="form-group row">
38+
<label class="col-sm-4 col-form-label" for="lastname">Last name</label>
39+
<div class="col-sm-6">
40+
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last name" />
41+
</div>
42+
</div>
43+
44+
<div class="form-group row">
45+
<label class="col-sm-4 col-form-label" for="username">Username</label>
46+
<div class="col-sm-6">
47+
<input type="text" class="form-control" id="username" name="username" placeholder="Username" />
48+
</div>
49+
</div>
50+
51+
<div class="form-group row">
52+
<label class="col-sm-4 col-form-label" for="email">Email</label>
53+
<div class="col-sm-6">
54+
<input type="text" class="form-control" id="email" name="email" placeholder="Email" />
55+
</div>
56+
</div>
57+
58+
<div class="form-group row">
59+
<label class="col-sm-4 col-form-label" for="password">Password</label>
60+
<div class="col-sm-6">
61+
<input type="password" class="form-control" id="password" name="password" placeholder="Password" />
62+
</div>
63+
</div>
64+
65+
<div class="form-group row">
66+
<label class="col-sm-4 col-form-label" for="confirm_password">Confirm password</label>
67+
<div class="col-sm-6">
68+
<input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Confirm password" />
69+
</div>
70+
</div>
71+
72+
<div class="form-group row">
73+
<div class="col-sm-6 offset-sm-4">
74+
<div class="form-check">
75+
<input type="checkbox" id="agree" name="agree" value="agree" class="form-check-input"/>
76+
<label class="form-check-label">Please agree to our policy</label>
77+
</div>
78+
</div>
79+
</div>
80+
81+
<div class="form-group row">
82+
<div class="col-sm-9 offset-sm-4">
83+
<button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button>
84+
</div>
85+
</div>
86+
</form>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
<script type="text/javascript">
93+
$.validator.setDefaults( {
94+
submitHandler: function () {
95+
alert( "submitted!" );
96+
}
97+
} );
98+
99+
$( document ).ready( function () {
100+
$( "#signupForm" ).validate( {
101+
rules: {
102+
firstname: "required",
103+
lastname: "required",
104+
username: {
105+
required: true,
106+
minlength: 2
107+
},
108+
password: {
109+
required: true,
110+
minlength: 5
111+
},
112+
confirm_password: {
113+
required: true,
114+
minlength: 5,
115+
equalTo: "#password"
116+
},
117+
email: {
118+
required: true,
119+
email: true
120+
},
121+
agree: "required"
122+
},
123+
messages: {
124+
firstname: "Please enter your firstname",
125+
lastname: "Please enter your lastname",
126+
username: {
127+
required: "Please enter a username",
128+
minlength: "Your username must consist of at least 2 characters"
129+
},
130+
password: {
131+
required: "Please provide a password",
132+
minlength: "Your password must be at least 5 characters long"
133+
},
134+
confirm_password: {
135+
required: "Please provide a password",
136+
minlength: "Your password must be at least 5 characters long",
137+
equalTo: "Please enter the same password as above"
138+
},
139+
email: "Please enter a valid email address",
140+
agree: "Please accept our policy"
141+
},
142+
errorElement: "em",
143+
errorPlacement: function ( error, element ) {
144+
// Add the `invalid-feedback` class to the error element
145+
error.addClass( "invalid-feedback" );
146+
147+
if ( element.prop( "type" ) === "checkbox" ) {
148+
error.insertAfter( element.next( "label" ) );
149+
} else {
150+
error.insertAfter( element );
151+
}
152+
},
153+
highlight: function ( element, errorClass, validClass ) {
154+
$( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
155+
},
156+
unhighlight: function (element, errorClass, validClass) {
157+
$( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
158+
}
159+
} );
160+
161+
} );
162+
</script>
163+
</body>
164+
</html>

0 commit comments

Comments
 (0)