jQuery validate next 3 form fields onkeyup when previous formfield is filled

Question

I have a form, when submit is pressed and formfield propBacklink has a value, the following 3 fields (X, Y, Z) are validated too. This is regardless of their values, as they are readonly. An Ajax call returns if they are true or false based on the variables in their Ajax calls.

My problem is, how can I force the validation of fields (X, Y, Z) onkeyup of formfield propBacklink ?

 propBacklink: { required: false, url: true, remote: { url: "backlinkInDB.php", type: "post" }, rules: { CheckNextFields: true } }, $.validator.addMethod("CheckNextFields", function( value ) { this.element($("[name='X']")).validate(); this.element($("[name='Y']")).validate(); this.element($("[name='Z']")).validate(); }); 

Answer 1

Since your OP contains no code whatsoever, my answer will not contain code...

how can I force the validation of fields (X, Y, Z) onkeyup of formfield propBacklink ?

By default, the plugin evaluates the entire form on the click of submit, and each field individually on keyup and on focusout (on click for radio , checkbox , and select .)

Since you want to evaluate a group of fields when the propBacklink field is triggered, you'll need to write a new method (rule) for propBacklink using the .addMethod() method .

• Within this custom function, you can trigger validation on any element using this.element() .

   this.element(element); // the field being evaluated by the custom method: propBacklink this.element($('[name="X"]')); // field with name="X" 

• Only assign or declare this new rule to one field, propBacklink . X , Y , and Z will be validated as per the this.element() contained within the function of your new custom rule.

• Pay attention to the hundreds of examples posted here as well as the documentation within the tag Wiki .

---

EDIT :

I have no idea what you're trying to accomplish with this scheme of triggering validation on readonly fields that the user cannot directly control.

The following will check to see if X , Y , and Z are valid, and return an error if any of them fail validation.

$.validator.addMethod("CheckNextFields", function(value, element) {

    return this.optional(element) || (this.element($("[name='X']")) && this.element($("[name='Y']")) && this.element($("[name='Z']")));

}, "X, Y, and Z are not valid.");

(Of course, you'll also need to assign some validation rules to X , Y , and Z if you want to validate them. Otherwise, what would you trigger?)

The format of your rules object is a little messed up too. You are supposed to put the rules inside of the rules object. They are comprised of key:value pairs of the field name and the list of rules for each.

$('#yourform').validate({
    rules: {
        propBacklink: {
            // rules for propBacklink
            required: false,  // <- superfluous (default)
            url: true,
            remote: {
                url: "backlinkInDB.php",
                type: "post"
            },
            CheckNextFields: true
        },
        X: {
            // rules for X
        },
        Y: {
            // rules for Y
        },
        Z: {
            // rules for Z
        },
        ....
    },
    ....