How to Set Up Basic jQuery Form Validation in Two Minutes

Original Source: https://www.sitepoint.com/basic-jquery-form-validation-tutorial/?utm_source=rss

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.

<!–

Here’s a live demo of what we’re going to build:

CodePen LINK GOES HERE

–>

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.