Validation de formulaire jQuery avancée (5) : comment limiter la valeur d'un champ de saisie à celle d'un autre

Dans cet exemple, nous allons limiter la valeur maximale entrée dans un champ de saisie en fonction de celle entrée dans un autre.
Le formulaire comporte deux champs de saisie :

• Le premier champ est limité entre 0 et 100 (limitation définie dans la règle associée range: [0, 100])
• Le deuxième est limité entre 0 et la valeur saisie dans le premier.

La méthode range du plugin de validation permet de stipuler les valeurs minimales et maximales associées à un champ de saisie. Elle peut s'écrire sous forme d'une borne entre deux valeurs ou d'une fonction qui retourne un booléen.
Ici, nous faisons dépendre la valeur maximale appliquée au champ 2 de la valeur entrée dans le champ 1 (ou de la valeur maximale autorisée dans le champ 1 si celui-ci est vide).

<form id="myFormId" method="post">
    <label for="fieldOne">Champ un</label>
    <input type="text" name="fieldOne" id="fieldOneId" value="" /><br/>
    <label for="fieldTwo">Champ deux</label>
       <input type="text" name="fieldTwo" id="fieldTwoId" value="" /><br/>
    <input type="submit" value="Submit" />
</form>

$("#myFormId").validate({
    rules: {
        fieldOne: range: [0, 100],
        fieldTwo:
            range: function() {
                var maxValue = ($("#fieldOneId", "#myFormId").val() == '')? 100: $("#fieldOneId", "#myFormId").val();
                return [0, Math.min(maxValue, 100)];
            }
    }
});

Advanced jQuery Form validation (5): how to limit the value of an input field to another's (en anglais)
Validación de formulario jQuery avanzado (5): cómo limitar el valor de un campo de entrada a la de otro (en espagnol)
Validação de formulário jQuery avançado (5): como limitar o valor de um campo de entrada à doutro (en portugais)