Form validation in jQuery


In this lesson, you will learn how to validate a web form using the jQuery.

How to validate forms in jQuery?

When collecting information from the web form, you want to make sure that the user enters all the mandatory required information, as well as the data being entered, is in the correct format.

For example, you have a signup form that asks a user for username, email, and password. It is a must that user entered all these three before hitting the submit button and in the right format. If everything is fine, the data is sent to the web server, or a script stops the form submission and displays an appropriate error message.

To ensure that no required field is left empty, take its value using the jQuery val() function. If the value is an empty string, show an error message. To check values for checkboxes, radio buttons, and menus, you may need to write some complicated script.

You can write the form validation code from scratch, but the preferred way is not to reinvent the wheel and use the jQuery plugin.

One of the best jQuery validation plugins is dot validation

The download comes with lots of extra stuff, including a demo, images, etc. But you need only one file jquery.validate.min.js. Add this file to your code as an external JavaScript file, and bind the form with .valiate() method written in the plugin.

The plugin comes with its own validation rules. For example, to make this field required,  and to validate an email id, and so on. But you can also add your validation rules using HTML.

The validation plugins provide you with a predefined set of error messages like “Please enter a valid data”, or “please enter a valid number”, and so on. You can also customize these error messages according to your needs.

Example of Form validation in jQuery

Let’s validate a simple web form using the plugin mentioned above. This form has three input fields, and a submit button. All fields are required; missing any of them will raise an error message.

jQuery validation

If you hit the submit button without entering any information in the web fields, the plugin will display error messages.

The HTML

<div class="text-center" id="container">
   <form class="cmxform" id="commentForm" method="get" action="">
      <fieldset>
         <legend>Please provide your name, email address 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="ccomment">Your comment (required)</label>
            <textarea id="ccomment" name="comment" required cols="60" rows="5"></textarea>
         </p>
         <p>
            <input class="submit" type="submit" value="Submit">
         </p>
      </fieldset>
   </form>
</div>

The CSS

input {
	width: 80%;
	padding: 7px;
}

.submit {
	color: white;
	background-color: #00A9FE;
	border: 0;
	outline: none;
}

#container {
	margin: 20px;
	padding: 10px;
	border: 1px solid #ccc;
	width: 600px;
}

The jQuery

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js" ></script> 
<script>
    $(document).ready(function() {
        $("#commentForm").validate();
    }); 
</script>

That’s it. With a single line of code, you can validate the whole web form. The process is pretty straight forward. You can learn more about the plugin from its official website or GitHub.

jQuery Forms Tutorial Home jQuery and AJAX

 

Tutorials Panel

About Tutorials Panel

programming tutorial and source code for Software Engineers and developers. https://twitter.com/TutorialsPanel

View all posts by Tutorials Panel →

Leave a Reply