Today, we’ll be discussing jQuery form validation, which assumes you already have a basic working knowledge of jQuery. If you’re looking to pick up jQuery quickly, you can sign up for our 1 hour jQuery course.
JQuery Form Validation
What is form validation exactly? Validating a form means simply checking it for errors before accepting it. Validating a form using jQuery can be a lengthy process. There are several things you need to keep an eye on while writing code to validate a form, like creating a library of validation methods for email addresses, URLs, birthdates and names. You also need to write code to display error messages to your users and make your form capable of reacting to submit events. It’s much easier to simply use a JQuery form validation plugin instead of writing your own validation code, especially if you’re just getting started with JQuery. If you insist on writing your own JQuery form validation code, you should download a form validation plugin and study its source code.
<form> elements </form>
A simple form will include several text fields and password fields. For example, the code to display fields for the first name, last name, account number and password of a user would be:
<form> Account name: <input type=”text” name=”aname”><br> Password: <input type="password" name="pass"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> </form>
Now, how would you validate a simple form like this? You would need to write code that checks if the account name the user enters is available or not. If it’s not available, you would need to return an error message to the user. Then, you would have to check if the password entered is permissible – if the number of digits in the password are too less, for example, then an error message must be displayed. Then, you need to check if the first name and last name has been entered correctly. If the user has entered numbers, you need to return an error message again. Finally, you have to ensure that none of the fields have been left blank. You can see why writing code to validate a form can be so difficult. You’ll probably end up missing a few things and the forms you accept on your website will be riddled with errors.
JQuery Form Validation Plugin
Luckily, you can download form validation plugins instead of writing the code yourself. There are many reliable, high quality plugins out there that you can download and use for free. The jQuery Validation Plugin, for example, is one of the oldest, most reliable and most popular plugins available on the internet.
The validate () method is used to validate the form for this plugin. Here is an example of the some code they have published on their website:
<form 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 type="submit" value="Submit"/> </p> </fieldset> </form> <script> $("#commentForm").validate(); </script>
As you can see, just a single line of jQuery code (the validate () method), along with writing validation rules to each section of the form, is enough to get your form validated. You don’t actually have to write code that checks for mistakes. If you want to take a look at the source code, download the plugin here: http://jqueryvalidation.org/
There are several very useful methods this plugin includes. For example, the required method makes an element required before a form is accepted. The minlength method allows you to set a minimum length for a password before it is accepted. The digits method ensures that a user can’t enter letters when he or she is filling out their date of birth. The email method includes code that checks whether a user has entered a valid email or not.
The jQuery Form Validator
The jQuery Form Validator is another plugin that is easy to install and use. Here is a basic example of how the plugin works (appears as published on the official website):
<form action="/registration" method="POST"> <p> Name (4 characters minimum): <input name="user" data-validation="length" data-validation-length="min4"> </p> <p> Year (yyyy-mm-dd): <input name="birth" data-validation="date" data-validation-format="yyyy-mm-dd"> </p> <p> Website: <input name="website" 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.1.38/jquery.form-validator.min.js"></script> <script> $.validate(); </script>
As you can see, the “script source” part of the code, at the very end, includes the library reference. All you have to do is include those js files at the end of code you have on your website or webpage. Some of the features of this plugin include security checks (a security module that includes spamchecks, strength of password and password confirmation), location checks (checks country of user) and special code to validate entries made by Swedish and British users. You can download the jQuery Form Validator here: https://github.com/victorjonsson/jQuery-Form-Validator/
If you want to learn how to write code to validate your jQuery form, we recommend you sign up for our jQuery course. If you’re specifically interested in created pages for mobile devices, you can instead check this course specially designed for jQuery on Mobile devices. Go on, have fun!