HTML Form validation with animations by jQuery: 4 demos
What is formAnimation plug-in about?
The formAnimation plug-in is a light-weight plug-in based at jQuery that can be used for showing cool animations for web forms upon invalid submission.
You may use this plug-in for simple HTML forms or based at other frameworks like Bootstrap forms as well.
Underway, this form validation plug-in uses the animate.css animations.
Let me show this by way of demos and you can also see how to set up this plugin in your web project.
A demo of bounce animation upon invalid submission
In this example, a form is created by using the Bootstrap framework classes. Only a few fields are used for demonstration purpose. As you click the “Create Account” button, without filling any form field, the form will animate with bounce style. See the demo and code online which is followed by setting up steps:
See online demo and code
This is how form animation is done:
As such, this form is based at Bootstrap’s classes, you have to include Bootstrap’s CSS file in the <head> section.
The form is using animate.css based animations, so its CSS file is also included in the <head> section:
<link href=’css/animate.css’ media=’all’ rel=’stylesheet’>
The plug-in’s CSS file is also included in the <head> section:
<link href=’css/form-valid-style.css’ media=’all’ rel=’stylesheet’>
Note: If you are using your own style or simple HTML form, then you do not need to include the Bootstrap class.
In the markup section, the form code with various classes is given.
Above the </body> tag, the library of jQuery and JS file of plug-in are included as follows:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
<script src=’js/formvanimation/jquery.validate.min.js’></script>
<script src=’js/formvanimation/formAnimation.js’></script>
<script src=’js/formvanimation/bounce.js’></script>
Finally, you may specify different animation style by calling the form in the <script> section, for example:
|
1 2 3 4 5 |
<script> $("#form1").formAnimation({ animatedClass: 'bounce' }); </script> |
You may get the complete code in the demo page. For downloading the plug-in, go to GitHub website here.
You may also get the JS files by view source the demo page, find the JS file, open it and save in your system.
A simple form example
Just for demonstration, I am using a very basic form without any CSS classes for showing the plug-in works the same way as using with Bootstrap or custom CSS.
The same set of fields is created without any style and the animation style is bounceIn. See the demo online by clicking the links below:
See online demo and code
The following form code is used:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<form id='form1'> <div > <label for='username'>Enter User name</label> <input id='username' name='username' placeholder='Username here' type='text'> </div> <div > <label for='email'>Email:</label> <input id='email' name='email' placeholder='Enter Email address' type='text' </div> <div> <label for='password'>Password</label> <input id='password' name='password' placeholder='Password (must be 8 character)' type='password' </div> <div > <input type='submit' value='Create Account'> </div> </form> |
While this is the script with animation effect:
|
1 2 3 4 5 |
<script> $("#form1").formAnimation({ animatedClass: 'bounceIn' }); </script> |
A demo of form with wobble animation
Using the same demo form as in the first example, this time with wobble animation effect if the form is submitted without entering the values.
See online demo and code
Following value is used in the <script>:
|
1 2 3 4 5 |
<script> $("#form1").formAnimation({ animatedClass: 'wobble' }); </script> |
A demo of rubberBand animation with custom CSS
In this example, the text fields are also given a custom CSS class which is placed in the <style> section under the <head> tag. The animation value used in the script is rubberBand. See the output by clicking the “Create Account” button without filling the form:
See online demo and code
You can see the complete list of animations here.