jquery validation rules for postal/zip code

Question

I got the following code which partially works. I need to validate Canadian postal if country is Canada pay_id_1 == 1 or US zip code if pay_id_1 == 234.

var validator = $form.validate({
    ignore: ".ignore,:hidden:not(input[type='hidden'])",
    rules: {
        par_prenom_1: {
            required: true
        },
        par_nom_1: {
            required: true
        },
        par_adresse_1: {
            required: true
        },
        par_ville_1: {
            required: true
        },
        pro_id_1: {
            required: true
        },
        pay_id_1: {
            required: true
        },
        par_codepostal_1: {
            required: true,
            postalCodeCA: function() {
                if ($("#pay_id_1").val() === 1) {
                    return true
                } else {
                    return false
                }
            },
            zipcodeUS: function() {
                if ($("#pay_id_1").val() === 234) {
                    return true
                } else {
                    return false
                }
            }
        },
        par_telephone1_1: {
            required: true
        },
        par_courriel_1: {
            required: true,
            email: true
        },
        par_naissance_1: {
            required: true,
            dateCA: true,
            daterange: ["1917-09-04", "2001-09-03"]
        },
        par_sexe_1: {
            required: true
        },
        que_2580_1: {
            required: true
        },
        que_2581_1: {
            required: true
        },
        que_2582_1: {
            required: true
        },
        que_2583_1: {
            required: true
        }
    },
    messages: {
        par_prenom_1: {
            required: "Veuillez entrer une valeur"
        },
        par_nom_1: {
            required: "Veuillez entrer une valeur"
        },
        par_adresse_1: {
            required: "Veuillez entrer une valeur"
        },
        par_ville_1: {
            required: "Veuillez entrer une valeur"
        },
        pro_id_1: {
            required: "Veuillez entrer une valeur"
        },
        pay_id_1: {
            required: "Veuillez entrer une valeur"
        },
        par_codepostal_1: {
            required: "Veuillez entrer le code postal/zip",
            postalCodeCA: "Veuillez entrer un code postal/zip valide"
        },
        par_telephone1_1: {
            required: "Veuillez entrer le numéro de téléphone",
            phoneUS: "Le numéro de téléphone doit être sous le format 555-555-5555"
        },
        par_courriel_1: {
            required: "Veuillez entrer le courriel",
            email: "Le courriel doit être une adresse valide"
        },
        par_naissance_1: {
            required: "Veuillez entrer la date de naissance",
            dateCA: "La date de naissance doit être sous le format AAAA-MM-JJ",
            daterange: "La date de naissance doit être entre {0} et {1}"
        },
        par_sexe_1: {
            required: "Veuillez entrer une valeur"
        },
        que_2580_1: {
            required: "Veuillez faire un choix"
        },
        que_2581_1: {
            required: "Veuillez entrer une valeur"
        },
        que_2582_1: {
            required: "Veuillez entrer une valeur"
        },
        que_2583_1: {
            required: "Veuillez entrer une valeur"
        }
    }
});

The problem is both rules apply for any country. Can you see what I can't?

Answer 1

You'll need to leverage the .rules() methods to dynamically change the rules on a field.

You can trigger the function using the click and focus events. Use the rules object within the .validate() method to set any initial default rules.

Also, as stated in the other answer, you'll need to use quotation marks since the value from the field is a string.

$('[name="par_codepostal_1"]').on('click focus', function() {
    if ($("#pay_id_1").val() === '1') {
        $(this).rules('add', {
            postalCodeCA: true,
            zipcodeUS: false
        });
    } else if ($("#pay_id_1").val() === '234') {
        $(this).rules('add', {
            postalCodeCA: false,
            zipcodeUS: true
        });
    } else {
        // whatever
    }
});

DEMO: jsfiddle.net/rb3fetuk/

Alternatively, you can trigger the rule change when you blur away from the pay_id_1 field.

$('#pay_id_1').on('blur', function() {
    if ($(this).val() === '1') {
        $('[name="par_codepostal_1"]').rules('add', {
            postalCodeCA: true,
            zipcodeUS: false
        });
    } else if ($(this).val() === '234') {
        $('[name="par_codepostal_1"]').rules('add', {
            postalCodeCA: false,
            zipcodeUS: true
        });
    } else {
        // whatever
    }
});

DEMO: jsfiddle.net/rb3fetuk/1/