If you are working on a Web-Application, you definitely need to validate the forms created on your website, and as we know there are two types of validations, server-side and client-side validations, we always implement server-side validation and it is mandatory, but it is better to implement client-side validations also, for better user experience.
So, here I will provide you the list of top jQuery form validation plugins which makes our client-side form validation jobs easy and simpler.
jQuery Validation Plugin
This is one of the most widely used jQuery form validation plugin, as it is easy to use and have wide range of validations, we can also customize and create our own functions to implement validations in form.
The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 37 other languages.
If you are working on a ASP.NET MVC application and want to implement it here is the article which explains it https://qawithexperts.com/article/jquery/client-side-validation-using-jquery-validate/32
Here is the quick example to implement it.
Let's consider this is our HTML form which we need validate
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>then just include the above jQuery Validation plugin and use it as below
//validate the form when it is submitted
$("#commentForm").validate();Here is the working fiddle link https://jsfiddle.net/50vL9L72/
If you want to validate form on custom button click take a look at the question asked here https://qawithexperts.com/questions/76/how-to-validate-jquery-form-validation-on-button-click
Parsley
Parsley is an extensible plugin that offers ordinary options like localization and custom validation rules, but also a remote Ajax validation. The documentation is clean and easy to read and the project is actively maintained. Validation rules can be controlled using HTML5 form or custom data attributes.
Parsley is Open Source, MIT licensed plugin.
Here is the quick example of it
HTML form to Validate
<form role="form">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" name="name" pattern="^([a-zA-Z\s]{3,})$" required>
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<button type="submit" class="btn btn-default">Subscribe</button>
</form>
jQuery code to validate using the plugin
var $form = $("form");
$form.parsley().on("form:submit", function(){
return false; // avoid submitting
});
Fiddle example: https://jsfiddle.net/6kajcb44/
jQuery Form Validator
jQuery Form Validator is a feature rich and multilingual jQuery plugin that makes it easy to validate user input while keeping your HTML markup clean from javascript code.
It offers a basic set of validation rules by default and lets you load further modules on demand.
Here is the complete HTML, jQuery code example from the website
<form action="/registration" method="POST">
<p>
User name (4 characters minimum, only alphanumeric characters):
<input data-validation="length alphanumeric" data-validation-length="min4">
</p>
<p>
Year (yyyy-mm-dd):
<input data-validation="date" data-validation-format="yyyy-mm-dd">
</p>
<p>
Website:
<input data-validation="url">
</p>
<p>
<input type="submit">
</p>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script>
$.validate({
lang: 'en'
});
</script>Fiddle link https://jsfiddle.net/bk00uda1/
Bootstrap validator
Bootstrap validator plugin sticks to the conventions set by Bootstrap’s core jQuery plugins. The plugin is just wrapped around a native form validation using HTML5 attributes. It validates fields that are present when the plugin is initialized.
In this,Validation rules are specified on form inputs via the following standard HTML5 attributes:
type="email"type="url"type="number", with additional constraints viamax,minandstepattributespattern="Reg(ular )?Exp(ression)?"(for input types oftext,search,tel,urloremail)required
As well as the following non-standard attributes:
data-match="#inputToMatch"to ensure two fields match, e.g. password confirmationsdata-minlength="5"to enforce a minimum amount of charactersdata-remote="/path/to/remote/validator"to make an AJAX request to determine if the field is valid or not.
Form Validation
Form Validation is one of the absolute best plugins you could try. This operates on top of frameworks like Bootstrap, Foundation, Semantic UI, and many others.
With a perfect combination of web tool kits that make frontend easy, Form validation plugin comes with multiple of settings for any type of form field and validation type.
It has more than 50 validators and you can create your own validators also, it also support 38 languages.
Examples link http://formvalidation.io/examples/
Smoke
Smoke is an open source form validation plugin that is made specifically for Bootstrap. It is hosted, developed and maintained on Github. It is quite simple and easy to use. This plugin does not use native browser validation. Error messages are not automatically localized and validation rules need to be specified using data attributes, JavaScript and HTML5.
It supports Angular,Select2 and bootstrap datepicker. Smoke is open source plugin.
Code Pen example link https://codepen.io/alfredobarron/pen/rOgMvV
Validate.JS
The very popular Validate.js has been around for a few years and offers quality form validation. It can work on jQuery but requires no actual dependencies, so vanilla JavaScript is OK too.
It is Lightweight JavaScript form validation library inspired by CodeIgniter.Just over 2kb gzipped, and customizable.
That's it, we are done with our important jQuery form validation plugins list, there are many more validation plugins available on the interent, but above mentioned one's are widely used.
Buy us a coffee
Become a Patron