jQuery Validation Plugin: How to Perform Validation Checks on Input Forms

Using the jQuery Validation Plugin, we perform validation checks on input and selection fields of an input form. This article explains how to display error messages for fields that are left blank or have invalid inputs/selections.

Input forms in web applications are essential gateways for users to submit data to the app. However, if users input data in an incorrect format, it may cause system issues or prevent correct information from being received. Therefore, appropriate validation is crucial.

In this article, we will explain in detail how to use the jQuery Validation Plugin to set up validation on input forms and display error messages when incorrect data is entered.

By leveraging this plugin, complex validation settings can be easily implemented. We will introduce specific examples to help users enter data more intuitively and ensure the correct format.

Step 1: Load the CSS File

First, prepare a CSS file to style the form. Here, we load a stylesheet called screen.css to style the input fields and error messages. You can freely adjust the style based on your design needs.

Step 2: Introduce the jQuery Validation Plugin

Next, load the jQuery Validation Plugin and configure the basic validation settings. As shown below, load jquery-3.1.1.js and jquery.validate.js. Using this plugin eliminates the need for complex JavaScript coding and allows intuitive configuration.

To set validation for the form, use the $.validator.setDefaults method to define default behavior. Here, we add a simple handler that displays an alert when the submit button is clicked.

Step 3: Create the HTML Input Form

Next, create the actual input form. Here, common form fields like “First Name”, “Last Name”, “Username”, “Password”, and “Email Address” are used. By setting id="signupForm", the validation settings will be applied to this form.

<h1>Perform input form validation checks using jQuery Validation Plugin</h1>
<div align="center">Fill in or select options from the form below and click the "Submit" button.<br>Error messages will be displayed for fields that are left blank or have invalid formats.</div>
<div id="main">
  <form class="cmxform" id="signupForm" method="get" action="">
    <fieldset>
      <p>
        <label for="firstname">First Name</label>
        <input id="firstname" name="firstname" type="text">
      </p>
      <p>
        <label for="lastname">Last Name</label>
        <input id="lastname" name="lastname" type="text">
      </p>
      <p>
        <label for="username">Username</label>
        <input id="username" name="username" type="text">
      </p>
      <p>
        <label for="password">Password</label>
        <input id="password" name="password" type="password">
      </p>
      <p>
        <label for="confirm_password">Confirm Password</label>
        <input id="confirm_password" name="confirm_password" type="password">
      </p>
      <p>
        <label for="email">Email Address</label>
        <input id="email" name="email" type="email">
      </p>
      <p>
        <label for="agree">Agree to the policy</label>
        <input type="checkbox" class="checkbox" id="agree" name="agree">
      </p>
      <p>
        <label for="newsletter">Receive newsletter</label>
        <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
      </p>
      <fieldset id="newsletter_topics">
        <legend>Topics (Please select at least 2) - Note: This section will be hidden if the newsletter is not selected, but is shown here for demo purposes</legend>
        <label for="topic_marketflash">
          <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Market
        </label>
        <label for="topic_fuzz">
          <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Updates
        </label>
        <label for="topic_digester">
          <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing List
        </label>
        <label for="topic" class="error">Please select at least 2 topics you wish to receive.</label>
      </fieldset>
      <p>
        <input class="submit" type="submit" value="Submit">
      </p>
    </fieldset>
  </form>

</div>

Demo Page: Input Form Validation with jQuery Validation Plugin

Try the demo page below to see how it works.

Demo page for input form validation using jQuery Validation Plugin

Source: jQuery Validation Plugin

Here is the official source site:
jQuery Validation Plugin | Form validation with jQuery

Conclusion

In this article, we introduced how to perform input form validation using the jQuery Validation Plugin. By using this plugin, you can reduce the amount of coding and implement user-friendly and visually clear error messages, improving overall usability. You can also customize the design of error messages and validation rules to meet your specific requirements.

This kind of form validation is a very useful technique in front-end development. Especially for beginners, we recommend starting with this plugin to learn the basics of validation, and gradually advancing to creating custom validation with JavaScript.

　
* Please use this at your own risk.
Do not reuse the Google Analytics tag inside the head of the demo page.