domingo, 11 de marzo de 2012

Validación de formulario jQuery avanzado (5): cómo limitar el valor de un campo de entrada a la de otro

En este ejemplo, vamos limitar el valor máximo entrado en un campo de entrada en función de la entrada en otro.
El formulario tiene dos campos de entrada:
  • El primer campo está limitado entre 0 y 100 (limitación establecida en la regla asociada range: [0, 100])
  • El segundo está limitado entre 0 y el valor entrado en el primero.

El método range del plugin de validación permite estipular los valores mínimo y máximo asociados al campo de entrada. Se puede escribir en la forma de un límite entre dos valores o de una función que devuelve un booleano.
Aquí, hacemos depender el valor máximo aplicado al campo 2 del valor entrado en el campo 1 (o del valor máximo autorizado en el campo 1 si está vacío).
<form id="myFormId" method="post">
    <label for="fieldOne">Campo uno</label>
    <input type="text" name="fieldOne" id="fieldOneId" value="" /><br/>
    <label for="fieldTwo">Campo dos</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 inglés)
Validation de formulaire jQuery avancée (5) : comment limiter la valeur d'un champ de saisie à celle d'un autre (en francés)
Validação de formulário jQuery avançado (5): como limitar o valor de um campo de entrada à doutro (en portugués)

No hay comentarios:

Publicar un comentario