2009-08-11 11 views
8

Estoy intentando escribir un validador "Menos que" para jQuery. Quiero comparar un cuadro de texto en contra de otro, por lo que si tengo:jQuery valida menos de

<input type="text" id="value1" /> <input type="text" id="value2" /> 

Quiero que mi validador para que parezca

$('#myForm').validate({rules: { value1: { lessThan: "#value2" } } }); 

He intentado esto pero no puedo conseguir que funcione:

$.validator.addMethod('lessThan', function(value, element, param) { 
    var i = parseInt(value); 
    var j = parseInt($(param).val()); 
    return i >= j; 
}, "Less Than"); 

Otra pregunta es ¿dónde debo poner ese código? En $ (documento). ¿Listo o solo en una etiqueta?

Respuesta

11

Soy un idiota. Hice algunos errores tipográficos en mi código actual y me equivoqué con este elemento opcional (opcional) que veo en muchos métodos de validación. Esta es la función de trabajo:

$.validator.addMethod('lessThanEqual', function(value, element, param) { 
    if (this.optional(element)) return true; 
    var i = parseInt(value); 
    var j = parseInt($(param).val()); 
    return i <= j; 
}, "The value {0} must be less than {1}"); 

Aquí está la versión condensada

$.validator.addMethod('lessThanEqual', function(value, element, param) { 
    return this.optional(element) || parseInt(value) <= parseInt($(param).val()); 
}, "The value {0} must be less than {1}"); 

Ahora tengo que encontrar la manera de volver a ejecutar la validación para el campo 1 cuando cambio campo2.

0

Creo que puede hacerlo sin tener que escribir su propio método de validador.

$('#myForm').validate({ 
    rules: { 
     value1: { 
      maxlength: $('#value2').val().length 
     } 
    } 
}); 

$('#value2').change(function() { 
    $('#value1').rules('remove', 'maxlength').rules('add', { 
     maxlength: $('#value2').val().length 
    }); 
}); 

o incluso mejor sin duplicación de código

function getRule() { 
    return { 
     maxlength: $('#value2').val().length 
    }; 
} 

$('#myForm').validate({ 
    rules: { 
     value1: getRule() 
    } 
}); 

$('#value2').change(function() { 
    $('#value1').rules('remove', 'maxlength').rules('add', getRule()); 
}); 
+0

Gracias. Esto funciona, pero logré que mi validador funcione. Tú fuiste quien me inspiró. –

+5

-1 el OP habla de números, hablas de longitudes 0_o – bluish

1

puede insertar su método de validación dentro de cualquier bloque de lista de documentos, como el que se muestra a continuación.

$().ready(function() { 

    $.validator.addMethod("lessThan", 
     function(value, element, param) { 
      var i = parseFloat(value); 
      var j = parseFloat(param); 
      return (i < j) ? true : false; 
     } 
    ); 

}); 

He tratado de mantener esto simple para que pueda modificarlo. Si el método se llama "lessThan", debería hacer exactamente eso. Si su método realmente realiza "menor que o igual a", considere un nombre más apropiado.

Tenga en cuenta que también estoy usando parseFloat, lo que permite al método más flexibilidad que parseInt.

Desde dentro de su validador, lo estaba utilizando correctamente; para una validación de decir, menos de 10:

$('#myForm').validate({ rules: { value1: { lessThan: "10"}} }); 

¡Buena suerte!

+1

¿Por qué estás usando un operador ternario así? su declaración de devolución es equivalente a 'return (i

Cuestiones relacionadas