domingo, 11 de março de 2012

Validação de formulário jQuery avançado (5): como limitar o valor de um campo de entrada à doutro

Nesse exemplo, vamos limitar o valor máximo entrado num campo de entrada en função da entrada noutro.
O formulário tem dois campos de entrada:
  • O primeiro campo é limitado entre 0 e 100 (esta limitação é definida na regra associada range: [0, 100])
  • O segundo é limitado entre 0 e o valor entrado no primeiro.

O método range do plugin de validação permite estipular os valores mínimo e máximo associados a um campo de entrada. Pode-se escrever sob a forma de uma limite entre dois valores ou de uma função que retorna um booleano.
Aqui, fazemos depender o valor máximo aplicado no campo 2 do valor entrado no campo 1 (ou do valor máximo autorizado no campo 1 se estiver vazio).
<form id="myFormId" method="post">
    <label for="fieldOne">Campo um</label>
    <input type="text" name="fieldOne" id="fieldOneId" value="" /><br/>
    <label for="fieldTwo">Campo dois</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 (em inglês)
Validation de formulaire jQuery avancée (5) : comment limiter la valeur d'un champ de saisie à celle d'un autre (em francês)
Validación de formulario jQuery avanzado (5): cómo limitar el valor de un campo de entrada a la de otro (em espanhol)

Sem comentários:

Enviar um comentário