How to Validate HTML form using Jquery
09 Nov 2016 by
Jquery Validation is simple, it doesn't have to be a scary or time-consuming process. This tutorial shows you how to set up a basic form validation with jQuery. Here i am going to use jQuery Validation Plugin, it makes simple clientside form validation easy, whilst still offering plenty of customization options.
Step 1: Include jQuery
First, we need to include jQuery as the validation plugin is currently only compatible with jQuery versions lower than 2.0.
Create a new HTML file named index.html and include jQuery before the closing tag:
Step 2: Include the jQuery Validation Plugin
Include the plugin after jQuery, or you can download them in your folder and call them from there:
Step 3: Create a HTML form
Now you need to create a form in html, For the mail sending we want to collect the following user information:
3. Phone Number
So, let’s create our form containing these input fields:
< form id="form" action="#" method="post" >
< input type="text" name="name" placeholder="Name..." />
< input type="text" name="email" placeholder="Email id..." />
< input type="text" name="phone" placeholder="Phone..." />
< textarea name="message" placeholder="Message..." > textarea >
< button value="Submit" > Submit < button >
Step 4: Create Style for the form
You can create style for the form to look good and attractive, here it goes:
Step 5: Create the Validation Rules
Finally create validation rules for the form like this, its easy:
That’s it, you’re done! Now you have an idea how to set up form validation with jQuery. Thank you!! Hope you liked it.
Creative Website Designer