How to set conditional rules based on user selection with jQuery validate?

To set conditional rules based on user selection with jQuery Validate plugin, you can use the rules() method to dynamically add or remove validation rules based on the user’s selection.

Suppose you have a form with two select elements, and you want to apply different validation rules to an input field based on the user’s selection in these select elements.

HTML:

<form id="myForm">
    <select id="select1" name="select1">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
    </select>
    
    <select id="select2" name="select2">
        <option value="optionA">Option A</option>
        <option value="optionB">Option B</option>
    </select>

    <input type="text" id="inputField" name="inputField">
    <button type="submit">Submit</button>
</form>

JavaScript:

$(document).ready(function() {
    // Initialize form validation
    $("#myForm").validate();

    // Add or remove validation rules based on user selection
    $("#select1").change(function() {
        if ($(this).val() === "option1") {
            $("#inputField").rules("add", {
                required: true,
                minlength: 5
            });
        } else {
            $("#inputField").rules("remove", "required minlength");
        }
    });

    $("#select2").change(function() {
        if ($(this).val() === "optionA") {
            $("#inputField").rules("add", {
                number: true
            });
        } else {
            $("#inputField").rules("remove", "number");
        }
    });
});

In this code, we first initialize the form validation using $("#myForm").validate().

Then, we add change event handlers to the select elements (#select1 and #select2).

Inside the change event handlers, we use the rules() method to dynamically add or remove validation rules from the input field (#inputField) based on the user’s selection in the select elements.

For example, if the user selects “Option 1” in #select1, we add the required and minlength rules to #inputField. If the user selects another option, we remove these rules.

Similarly, we handle the selection in #select2 to add or remove the number rule from #inputField.

This way, you can dynamically apply validation rules based on user selection using jQuery Validate plugin.