jQuery convalida meno di

Question

Sto tentando di scrivere un validatore "minore di" per jQuery. Voglio mettere a confronto una casella di testo contro un altro, quindi se ho:

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

voglio che il mio validatore a guardare come

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

Ho provato questo, ma non riesco a farlo funzionare:

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

Un'altra domanda è dove dovrei inserire quel codice? In $ (documento) .ready o solo in un tag?

Answer 1

Sono un idiota. Ho fatto alcuni errori di battitura nel mio codice reale e ho incasinato il this.optional (elemento) che vedo in molti metodi di validazione. Ecco la funzione di lavoro:

$.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}"); 

Qui è la versione condensata

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

Ora ho bisogno di capire come eseguire nuovamente la convalida per il campo 1 quando cambio field2.

Answer 2

Penso che si possa fare senza scrivere il proprio metodo di validazione.

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

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

o, meglio ancora, senza duplicazione del codice

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

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

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

Answer 3

è possibile inserire il metodo di convalida all'interno di qualsiasi blocco pronto documento, come quella mostrata qui sotto.

$().ready(function() { 

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

}); 

Ho cercato di mantenerlo così semplice da poterlo modificare. Se il metodo è chiamato "lessThan", allora dovrebbe fare proprio questo. Se il tuo metodo esegue effettivamente "meno o uguale a" considera un nome più appropriato.

Si noti che sto anche utilizzando parseFloat, consentendo al metodo una maggiore flessibilità di parseInt.

Dall'interno del vostro validatore, lo stavate usando correttamente; quindi per una convalida di dire, meno di 10:

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

Buona fortuna!