AllsWeb Blog
No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
Support
Knowledgebase
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
No Result
View All Result
AllsWeb White Logo
No Result
View All Result
Home JavaScript jQuery & AJAX

Form Validation using jQuery Validation Plugin

jQuery Validation Plugin

Lakshika Mathur by Lakshika Mathur
January 2, 2020
Reading Time: 3 mins read
0
Form Validation using jQuery Validation Plugin

To validate a form, I prefer Client-side form validation. Therefore, it creates your web project more user-friendly. So, you can find a lot of ways to do client-side validation in HTML form; On the other hand, jQuery Validation Plugin is also the simplest way to validate a form. The jQuery Validation Plugin helps you to implement form validation instantly with many customization options.

RELATED POSTS

Like Dislike Rating System with jQuery, Ajax, and PHP

Star Rating System with jQuery, Ajax, PHP, and MySQL

Display Loading Image While Page Loads using jQuery and CSS

With the help of this tutorial, we will explain to you how to integrate client-side form validation with the help of the jQuery validation plugin. Also, this sample script form validation code will help you to use custom validation rules and messages. In the sample script, we’ll explain to you the registration form validation with different regulations and custom messages.

To use jQuery Validation Plugin, you have to attach the jQuery library (jquery.min.js) and jQuery validation plugin library (jquery.validate.js).

<script src="jquery.min.js"></script>
<script src="jquery.validate.js"></script>

Use the validate() method to validate a form established on the selector provider.

Rules are key/value pairs that define custom rules. Key is the name of an element, and value is an object that consists of rule/parameter pairs or a plain String.

Messages are key/value pairs that define custom messages. Key is the name of an element, and value is a message to display for respective elements.

$(document).ready(function() {
    $("#userForm").validate({
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true,
                number: true
            },
            url: {
                required: false,
                url: true
            },
            username: {
                required: true,
                minlength: 6
            },
            password: {
                required: true,
                minlength: 6
            },
            confirm_password: {
                required: true,
                minlength: 6,
                equalTo: "#password"
            },
            agree: "required"
        },
        messages: {
            name: "Please enter your name",
            email: "Please enter a valid email address",
            phone: {
                required: "Please enter your phone number",
                number: "Please enter only numeric value"
            },
            url: {
                url: "Please enter valid url"
            },
            username: {
                required: "Please enter a username",
                minlength: "Your username must consist of at least 6 characters"
            },
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 6 characters long"
            },
            confirm_password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 6 characters long",
                equalTo: "Please enter the same password as above"
            },
            agree: "Please accept our policy"
        }
    });
});

SEE ALSO: How to Install LAMP (Linux, Apache, MySQL, PHP) on Ubuntu

HTML Code

The user registration form HTML. Therefore, it is validated with the jQuery Validation Plugin.

<form class="userform" id="userForm" method="post" action="">
    <p>
        <label for="name">Name</label>
        <input id="name" name="name" type="text" >
    </p>
    <p>
        <label for="email">E-Mail</label>
        <input id="email" type="email" name="email" >
    </p>
    <p>
        <label for="phone">Phone</label>
        <input id="phone" type="phone" name="phone" >
    </p>
    <p>
        <label for="url">URL</label>
        <input id="url" type="url" name="url">
    </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="agree">Please agree to our policy</label>
        <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
        <input class="submit" type="submit" value="Submit">
    </p>
</form>

CSS Code

Use the following CSS to style the form and error message.

.userform{width: 400px;}
.userform p {
    width: 100%;
}
.userform label {
    width: 120px;
    color: #333;
    float: left;
}
input.error {
    border: 1px dotted red;
}
label.error{
    width: 100%;
    color: red;
    font-style: italic;
    margin-left: 120px;
    margin-bottom: 5px;
}
.userform input.submit {
    margin-left: 120px;
}

In the above script, we have only used the validation methods. So, you can also use other validation rules as per your requirement. See the list of built-in Validation methods from the Plugin website.

Also, read our previous blog- How to Connect to the Remote MySQL Database using PHP

Tags: Form ValidationjQuery
ShareTweetSendShareSharePinScan
Lakshika Mathur

Lakshika Mathur

Related Posts

Like Dislike Rating System with jQuery, Ajax, and PHP
jQuery & AJAX

Like Dislike Rating System with jQuery, Ajax, and PHP

January 6, 2020
739
Star Rating System with jQuery, Ajax, PHP, and MySQL
jQuery & AJAX

Star Rating System with jQuery, Ajax, PHP, and MySQL

January 6, 2020
162
Display Loading Image While Page Loads using jQuery and CSS
HTML & CSS

Display Loading Image While Page Loads using jQuery and CSS

January 1, 2020
42
Autocomplete Textbox with Multiple Selection using jQuery in PHP
jQuery & AJAX

Autocomplete Textbox with Multiple Selection using jQuery in PHP

December 29, 2019
1.2k
jQuery UI Autocomplete with Images and Custom HTML in PHP
HTML & CSS

jQuery UI Autocomplete with Images and Custom HTML in PHP

December 29, 2019
112
Auto Resize Textarea Height using jQuery
jQuery & AJAX

Auto Resize Textarea Height using jQuery

December 28, 2019
17
Next Post
How to Force Download File in PHP

How to Force Download File in PHP

Create a Digital Clock with Date using JavaScript

Create a Digital Clock with Date using JavaScript

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Comparison (3)
  • HTML & CSS (9)
  • Interesting Facts (1)
  • JavaScript (27)
    • jQuery & AJAX (18)
  • PHP and MySQL (48)
  • Security (10)
  • SEO (2)
  • Trademark (2)
  • Tutorials (5)
  • Uncategorized (1)
  • Web Hosting (19)
    • VPS Server (5)
  • WordPress (8)

Recent Posts

  • Is the Trademark valuable to your Brand or domain?
  • Ideas For Ten Fantastic Online Business From Home
  • Some best free WordPress Themes for Affiliate Marketing Websites
  • Home
  • Posts
  • Privacy Policy
  • Terms and Conditions

Built and Maintained With ♥ by AllsWeb Team

No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison

Built and Maintained With ♥ by AllsWeb Team

Go to mobile version