JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/additional-methods.min.js"></script>
<form id="myform">
    <input type="text" name="pay_id_1" id="pay_id_1" />
    <br/>
    <input type="text" name="par_codepostal_1" />
    <br/>
    <button type="submit">Submit</button>
</form>

JavaScript

$(document).ready(function() {

    $('#myform').validate({
        rules: {
            pay_id_1: {
                required: true
            },
            par_codepostal_1: {
                required: true
            }
        },
        messages: {
            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",
                zipcodeUS: "Please enter a valid US zip code"
            }
        }
    });

    $('[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
            });
        }
    });

});