How to Set Up Basic jQuery Form Validation in Two Minutes

This tutorial shows you how to set up a basic form validation with jQuery, demonstrated by a registration form.

We’re going to use the jQuery Validation Plugin to validate our form. The basic principle of this plugin is to specify validation rules and error messages for HTML elements in JavaScript.

Step 1: Include jQuery

First, we need to include the jQuery library. The jQuery validation plugin has been tested up to jQuery version 3.1.1, but the demo in this article works perfectly with version 3.4.1, which is the latest one.

You can use any of the following download options:

• Download it from jquery.com
• Download it using Bower: $ bower install jquery
• Download it using npm or Yarn: $ npm install jquery or yarn add jquery
• Use a CDN: https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

Create a new HTML file named index.html and include jQuery before the closing </body> tag:

<!-- Change the "src" attribute according to your installation path -->
<script src="vendor/jquery/dist/jquery.min.js"></script>

If you’d like to use Bower or npm but aren’t familiar with them, you might be interested in these two articles:

• Package Management for the Browser with Bower
• A Beginner’s Guide to npm — the Node Package Manager

Step 2: Include the jQuery Validation Plugin

Choose between:

• Download it from the plugin’s github repo
• Download it using Bower: $ bower install jquery-validation
• Download it using npm: npm i jquery-validation
• NuGet: Install-Package jQuery.Validation
• Use a CDN: https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js

Include the plugin after jQuery:

<!-- Change the "src" attribute according to your installation path -->
<script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>

The post How to Set Up Basic jQuery Form Validation in Two Minutes appeared first on SitePoint.