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?

Post the relevant HTML so a demo can be constructed. While you're at it, strip out all irrelevant fields. Just a minimal example that demonstrates the issue. — Sparky, Aug 18 '17 at 22:02
Also you are strictly checking equality between `$("#pay_id_1").val()`, which returns a string, and number literals, `1` and `234`. This will fail every time, even when `$("#pay_id_1").val()` is `'234'`. `'234' === 234 ==> false`. You have three options: 1) Convert `$("#pay_id_1").val()` to a number. Ex: `+$("#pay_id_1").val() === 1`. 2) Convert the numeric literals to string literals. Ex: `$("#pay_id_1").val() === '1'`. 3) Use the double-equals operator that runs automatic type coercion: Ex: `$("#pay_id_1").val() == 1`. — rgajrawala, Aug 18 '17 at 22:37

Sparky · Accepted Answer · 2017-08-19T15:16:52.253

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/

The blur solution worked well.I added the change event.Thanks! — jesse94, Aug 21 '17 at 14:47

jquery validation rules for postal/zip code

1 Answers1