Atmos
Search…
Form Validation
jQuery Validation plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate something into an existing application with lots of existing markup.

Step 1

Add JavaScript file before end body tag
1
<script src="assets/vendor/jquery.validate/jquery.validate.min.js"></script>
Copied!

Step 2

Add Markup
1
<form class="needs-validation" action="#">
2
<div class="form-row">
3
<div class="form-group floating-label col-md-12">
4
<label>Email</label>
5
<input type="email" required class="form-control" placeholder="Email">
6
</div>
7
<div class="form-group floating-label col-md-12">
8
<label>Password</label>
9
<input type="password" required class="form-control " id="password"
10
placeholder="Password">
11
</div>
12
</div>
13
<button type="submit" class="btn btn-primary btn-block btn-lg">Login</button>
14
</form>
Copied!

Step 3

Initialize the Plugin
1
$(".needs-validation").validate({
2
errorClass: "is-invalid",
3
validClass: "is-valid",
4
});
Copied!
Last modified 3yr ago
Copy link
Contents