jQuery validator - Impossibile chiamare il metodo 'call' di errore non definito - aggiungendo dinamicamente la validazione

Question

Questo è il mio codice per aggiornare la convalida jQuery in modo dinamico. Nel caricamento del documento, creo la convalida. Questo codice viene utilizzato per aggiornare la convalida del numero di telefono in modo dinamico. Dopo aver applicato questa convalida, quando inserisco qualcosa nella casella di testo del numero di telefono che ottengo non posso chiamare il metodo 'call' di errore non definito.

$("#phone").rules("remove"); 

$("#phone") 
    .rules(
    "add", 
    { 
    required:true, 
    minlength:5, 
    maxlength:20, 
    phoneUS:true, 
    messages:{ 
    required: "Enter company phone number", 
    minlength:"Phone number should contain a minimum of 5 characters", 
    maxlength:"Phone number should contain a maximum of 20 characters", 
    phoneUS:"Enter valid phone number" 
    } 

    }); 

Grazie in anticipo. Come risolvere questo?

Answer 1

Ci sono quattro potenziali problemi.

1) Manca una parentesi di chiusura per la sezione messages.

$("#phone").rules("add", { 
    required: true, 
    phoneUS: true, 
    messages: { 
     required: "Enter company phone number", 
     phoneUS: "Enter valid phone number" 
    } //<-- this was missing 
}); 

DEMO: http://jsfiddle.net/A8HQU/2

2) Non v'è a known bug in cui l'aggiunta di messages utilizzando il metodo rules('add') rompe il plugin e/o regola. Assicurati assolutamente di includere jQuery Convalida versione 1.11.1 o superiore.

3) La regola phoneUS richiede l'inclusione di the additional-methods.js file.

4) Il metodo rules('add') deve essere dopo la funzione di inizializzazione .validate().

Nota:

si sta utilizzando la regola phoneUS, così minlength e maxlength sono totalmente superfluo in quanto la regola phoneUS è già alla ricerca di un preciso formato/lunghezza.

Answer 2

Sopra il codice non funziona perché manca } dopo l'elenco di proprietà.

Answer 3

Ho avuto lo stesso problema, ma con una causa diversa. Lo stesso problema si verifica quando inserisco una regola "require: true" anziché "required: true".

Questo errore si verifica quando si specifica nelle regole una convalida che non ha un metodo corrispondente. Attraverso il debug ho scoperto che l'eccezione mostra che ho specificato che una regola "require" con il nome del metodo era "required". Tenta di accedere a un metodo all'interno di una hashmap e prova a .call() anche se il metodo non viene trovato, il che si traduce in un'eccezione.

Se l'autore del plugin ha semplicemente emesso un errore personalizzato in questo caso che ha dichiarato "La regola" richiede "non ha alcun metodo", sarebbe più facile eseguire il debug di & riconoscendo l'errore di battitura.

Questa è anche la stessa causa del famigerato problema con l'invio del plugin anche se i campi non sono validi.Vedere & votare per il mio rapporto edizione - https://github.com/jzaefferer/jquery-validation/issues/1212

Answer 4

È inoltre necessario aggiungere questo metodi aggiuntivi

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.js

Answer 5

come un bug relativo, se si aggiunge una regola personalizzata, utilizzando:

$.validator.addMethod('field-is-valid', function (val, element) { ...}) 

ma riferitelo nella dichiarazione delle regole con il nome errato:

$(element).rules('add', { 
    "field-valid": true 
}) 

avrai lo stesso Cannot call method call of undefined.

Answer 6

Mi sono imbattuto in un problema simile due volte di recente e ho trascorso un sacco di tempo a cercare di capirlo, quindi ho intenzione di lasciare qui una soluzione semplice. E se il moderatore pensa che questo non è il posto giusto, fammelo sapere.

l'errore si verifica durante l'esecuzione di questo codice di esempio:

$(document).ready(function() { 

    $.validator.addMethod("numberEqualTo", function (value, element, parameter) { 
     return parseInt(value) === parseInt(parameter); 
    }, "Values must match"); 

    $("#example2").validate({ 
     focusInvalid: false, 
     onkeyup: true, 
     onfocusout: true, 
     errorElement: "div", 
     errorPlacement: function (error, element) { 
      error.appendTo("div#errors"); 
     }, 
     rules: { 
      "example2-fullname": { 
       required: true, 
       minlength: 5 
      }, 
      "example2-phone": { 
       required: true, 
       number: true 
      }, 
      "example2-zip": { 
       required: true, 
       number: true, 
       rangelength: [3, 5] 
      }, 
      "example2-value": { 
       required: true, 
       number: true, 
       numberEqualTo: 10 
      } 
     }, 
     messages: { 
      "example2-fullname": { 
       required: "You must enter your full name", 
       minlength: "First name must be at least 5 characters long" 
      }, 
      "example2-phone": { 
       required: "You must enter your phone number", 
       number: "Phone number must contain digits only" 
      }, 
      "example2-zip": { 
       required: "You must enter your zip code", 
       number: "Zip code must contain digits only", 
       rangelength: "Zip code must have between 3 to 5 digits" 
      }, 
      "example2-value": { 
       required: "You must enter your value", 
       number: "Value must be a digit", 
       numberEqualTo: "Value must be equal to 10" 
      } 
     } 
    }); 
}); 

Perché? Per qualche motivo se si specifica esplicitamente:

onkeyup: true, 
onfocusout: true, 

il programma genererà l'eccezione menzionata. Questo è il caso quando si imposta ANY o BOTH sopra le opzioni su 'true'. D'altra parte se si imposta ENTRAMBI in "falso" o UNO in "falso" e si rimuove l'altro, funzionerà come previsto.

La cosa più importante: se elimini o commenta una di queste opzioni, quella che hai rimosso sarà impostata su default, che è 'true' E VINTO "T genera qualsiasi errore. Quindi è possibile personalizzare la convalida plug-in esattamente nel modo desiderato, è sufficiente ricordare di non impostare esplicitamente queste opzioni su "vero"

Spero che questo possa aiutare qualcuno, nonostante il fatto che il vero problema in questa domanda per questo particolare utente sia stato