🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Form Animation is a super tiny jQuery plugin which uses Animate.css to add cool CSS3 animations to your invalid form when submitting.

Form-Validation animatecss

Documentation

jQuery Form Animation Plugin - Form Animation: when form validation <3 animate.css

The jQuery Form Animation Plugin provides drop-in animation for your existing forms, while making all kinds of customizations to fit your application really easy.

Screenshot

Screenshot

Getting Started

Downloading the required libraries

jQuery can be downloaded from https://jquery.com/

jQuery Validation Plugin can be downloaded from http://jqueryvalidation.org/

Animate.css can be downloaded from https://daneden.github.io/animate.css/

Including it on your page

Include jQuery and the plugin on a page. Then select a form to add animation and call the formAnimation method.

<head> 	<link href='animate.css' media='all' rel='stylesheet'> </head> ... <body> 	<form> 		<input required> 	</form> 	<script src="jquery.js"></script> 	<script src="jquery.validate.js"></script> 	<script src="formAnimation.js"></script> 	<script> 	$("form").formAnimation({ animatedClass: 'shake' }); 	</script> </body>

Alternatively include jQuery and the plugin via requirejs in your module.

define(["jquery", "jquery.validate", "formAnimation"], function( $ ) { 	$("form").formAnimation({ animatedClass: 'shake' }); });

Reporting issues and contributing code

Bug reports and pull requests are welcome on GitHub at https://github.com/nnluukhtn/formAnimation.

License

Copyright © Luu Nguyen
Licensed under the MIT license.


You May Also Like