Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / how to include jquery validation in a web page?
Ask Question
Utpal Vishwas
Utpal Vishwas

Student

I am Utpal Vishwas from Uttar Pradesh. Have completed my B. Tech. course from MNNIT campus Prayagraj in 2022. I have good knowledge of computer networking.

Message

1 Answers

Aryan Kumar
Aryan Kumar 11 May 2023
Report Abuse

To include jQuery validation in a web page, you will need to:

  • Include the jQuery library. The jQuery library is a JavaScript library that provides a variety of useful functions, including form validation. To include the jQuery library in your HTML document, add the following code to the head of your document:

Code snippet

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  • Create a form. The form is the element that will be validated. To create a form, add the following code to your HTML document:

Code snippet

<form id="myForm">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" value="Submit" />
</form>
  • Attach the jQuery validation plugin to the form. The jQuery validation plugin is a plugin that provides a variety of form validation functions. To attach the jQuery validation plugin to the form, add the following code to your JavaScript file:

Code snippet

$(document).ready(function() {
  $("#myForm").validate();
});
  • Define the validation rules. The validation rules are the rules that will be used to validate the form fields. To define the validation rules, add the following code to your JavaScript file:

Code snippet

$(document).ready(function() {
  $("#myForm").validate({
    rules: {
      username: {
        required: true
      },
      password: {
        required: true,
        minlength: 6
      }
    }
  });
});
  • Validate the form. The form can be validated by calling the validate() method on the form object. For example, the following code would validate the form:

Code snippet

$("#myForm").validate();

If the form is valid, the submit() method on the form object will be called. If the form is invalid, an error message will be displayed.

Here is an example of a complete HTML and JavaScript file that includes jQuery validation:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Validation Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <form id="myForm">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="submit" value="Submit" />
  </form>
  <script>
    $(document).ready(function() {
      $("#myForm").validate({
        rules: {
          username: {
            required: true
          },
          password: {
            required: true,
            minlength: 6
          }
        }
      });
    });
  </script>
</body>
</html>

This code will create a form with two fields, a username field and a password field. The form will be validated when the user clicks the submit button. If the form is valid, the submit button will be clicked and the form will be submitted. If the form is invalid, an error message will be displayed.

MindStick Training