How to Add Dependent Validation using jQuery Validate.js

Hey there! If you're like me, you know that making sure the information users input into your website is correct and secure is super important.

That's where validation comes in handy, and today, I'm excited to walk you through adding a special kind of validation called dependent validation using jQuery Validate.js.

Imagine you have a form where users must create a password and confirm it. It's crucial to ensure they've typed the same password twice, right?

In this guide, I'll take you through the process step by step, making it easy to follow even if you're new to web development.

So, let's see how to add dependent validation using jquery validate.js, jquery validation, depend validation using jquery, and condition-based validation using jquery validate.js.

Step 1: Set Up Your HTML Form

Begin by creating your HTML form with the necessary input fields. For this example, let's imagine a form with two fields: "Password" and "Confirm Password".

<form id="myForm">
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">

  <label for="confirm_password">Confirm Password:</label>
  <input type="password" id="confirm_password" name="confirm_password">

  <button type="submit">Submit</button>
</form>

Step 2: Include jQuery and jQuery Validate.js

Make sure you have jQuery and jQuery Validate.js included in your project. You can do this by adding the following script tags in your HTML file.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.19.3/jquery.validate.min.js"></script>

Step 3: Write Your Validation Rules

Next, define your validation rules using jQuery Validate.js. In this case, we want to ensure that the "Confirm Password" field matches the value of the "Password" field.

$(document).ready(function() {
  $('#myForm').validate({
    rules: {
      password: {
        required: true,
        minlength: 8
      },
      confirm_password: {
        required: true,
        equalTo: '#password'
      }
    },
    messages: {
      password: {
        required: "Please enter a password",
        minlength: "Your password must be at least 8 characters long"
      },
      confirm_password: {
        required: "Please confirm your password",
        equalTo: "Passwords do not match"
      }
    }
  });
});

Example:

rules: {
    'contact': {
      required: true,
      email: {
        depends: function(element) {
          return $("#email").is(":checked");
        }
      },
      number: {
        depends: function(element) {
          return $("#phone_number").is(":checked");
        }
      }
    }
  }

Example:

<form id="myForm">
  <label for="age">Age:</label>
  <input type="number" id="age" name="age">

  <label for="grade">Grade:</label>
  <select id="grade" name="grade">
    <option value="1">1st Grade</option>
    <option value="2">2nd Grade</option>
    <option value="3">3rd Grade</option>
    <!-- More options up to 12th grade -->
  </select>

  <button type="submit">Submit</button>
</form>
$(document).ready(function() {
  $('#myForm').validate({
    rules: {
      age: {
        required: true,
        min: 1
      },
      grade: {
        required: true,
        depends: function(element) {
          // Check if age is under 18
          return $('#age').val() < 18;
        },
        max: 10
      }
    },
    messages: {
      age: {
        required: "Please enter your age",
        min: "Age must be a positive number"
      },
      grade: {
        required: "Please select your grade",
        max: "You cannot select a grade higher than 10th grade if you're under 18"
      }
    }
  });
});

In this example, the "Grade" field's validation is dependent on the value entered in the "Age" field. If the user's age is under 18, they won't be able to select a grade higher than 10th grade.

---

You might also like:

Read Also: Role And Permission In Laravel 9 Tutorial

Read Also: How to Create CRUD Operation in Laravel 11