Jquery Validation
The jQuery Validation Plugin provides drop-in validation for your existing forms while making all kinds of customizations to fit your application easy.
Jquery Validation DocumentationJavascript
<script src="assets/lib/jquery-validation/jquery.validate.min.js"></script>Registration Form
<form class="form-validation" data-options='{"rules":{"confirmPassword":{"equalTo":"#password-field"}}}'>
<div class="form-group">
<label for="form-name">Name*</label>
<input class="form-control" type="text" name="name" placeholder="Name" required id="form-name">
</div>
<div class="form-group">
<label for="form-email">Email*</label>
<input class="form-control" type="email" name="email" placeholder="Email" required id="form-email">
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="password-field">Password<span>*</span></label>
<input class="form-control" type="password" name="password" placeholder="Password" required id="password-field">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="confirm-password-field">Confirm Password<span>*</span></label>
<input class="form-control" type="password" name="confirmPassword" placeholder="Confirm Password" id="confirm-password-field">
</div>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" id="wizard-checkbox" type="checkbox" name="terms" required>
<label class="custom-control-label" for="wizard-checkbox">I accept the <a href="#!">terms </a>and <a href="#!">privacy policy</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Submit</button>
</form>Contact Form
<form class="form-validation">
<div class="form-group">
<label for="contact-form-name">Name*</label>
<input class="form-control" type="text" name="name" placeholder="Name" required id="contact-form-name">
</div>
<div class="form-group">
<label for="contact-form-email">Email*</label>
<input class="form-control" type="email" name="email" placeholder="Email" required id="contact-form-email">
</div>
<div class="form-group">
<label for="contact-form-subject">Subject*</label>
<select class="form-control custom-select" id="contact-form-subject" name="subject" required>
<option value="">Select any subject ...</option>
<option value="web-development">Web Development</option>
<option value="web-design ">Web Design</option>
<option value="graphics-design ">Graphics Design</option>
</select>
</div>
<div class="form-group">
<label for="contact-form-message">Message*</label>
<textarea class="form-control" rows="3" required id="contact-form-message"></textarea>
</div>
<button class="btn btn-primary btn-block" type="submit">Submit</button>
</form>
