Animated jQuery Form Validation Plugin – jquery.formValid

by Posted on

If you want to apply client side validation in HTML Form then in this post I am going share quick and simple Animated jQuery Form Validation Plugin – jquery.formValid. which help you to apply client side validation on your web based form on keyup and/or submit by just few line of code It also display animated error messages when the form fields are invalid that slide down from the top, based on CSS3 animations. jquery.formValid has 6 validation rules that are super easy to integrate in your HTML form.
Animated jQuery Form Validation Plugin

Integrate Animated jQuery Form Validation Plugin

Libraries

jQuery Form Validation plugin dependent on jQuery core library include it first after that add plugins CSS and Js lib.

<!--CSS-->
<link rel="stylesheet" href="jquery.formValid.csss">
 
<!--JS-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.formValid.js"></script>


HTML

Below created sample HTML form and apply validation on required field. You can Add the requireddata-field attribute to your form input fields. The valid-message element is used to add the error message when the form input field is invalid.

<form method="post" id="form">
	<div class="row">
		<div class="col-md-12">
			<input type="text" id="labelLogin" class="form-control" data-field="login">
			<label for="labelLogin">Login (email) *</label>
			<div class="valid-message"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<input type="password" id="labelPassword" class="form-control" data-field="password">
			<label for="labelSurname">Password *</label>
			<div class="valid-message"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<button class="btn btn-primary" type="submit">LOGIN</button>
		</div>
	</div>
</form>



JS

Finally call the plugin and apply animated form validation on form fields.

/* Init form fields */
var form = $('#form').formValid({
	fields: {
		"login": {
			"required": true, 
			"tests": [
				{
					"type": "null", 
					"message": "Not entered login"
				},
				{
					"type": "email", 
					"message": "Your email is incorrect"
				}
			]
		},
		"password": {
			"required": true,
			"tests": [
				{
					"type": "null", 
					"message": "Not entered password"
				}
			]
		}
	}
});
 
/* Validates the field after the change */
form.keypress(300);
$('button[type="submit"]').click(function() {
	// Validation test 	
	form.test();
	if (form.errors() == 0) {
		alert('Ok');
	}
	return false;
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Published by admin