Convalida Jquery - Errore nell'aggiunta di regole all'elemento di input?

Question

Sto cercando di implementare la convalida Jquery con http://docs.jquery.com/Plugins/Validation:

Il mio piano di progettazione:

• mio ingresso elemento:

  <form action="submit.php" id="form_id"> 
      <input type="text" class="val-req" id="my_input" name="myval" /> 
      <input type="button" onclick="validate_form('form_id', function() { $('#form_id').submit(); })" /> 
      <span id="val-msg" class="my_input"></span> 
  </form> 
  

• Poi, il pronto dom:

  $(document).ready(function() { 
           $('.val-req').rules('add', {required:true}); 
          }); 
  

• metodo Validate:

  function validate_form(form_id, callback) { 
       var form = $('#'+form_id); 
       $('.val-req').each(function() {$(this).rules('add', {required:true});}); 
       $(form).validate({ 
         errorElement: "span", 
         errorClass: "val-error", 
         validClass: "val-valid", 
         errorPlacement: function(error, element) { 
               $('#val-msg.'+$(element).attr('id')).innerHTML(error.html()); 
             }, 
         submitHandler: callback 
       }); 
  } 
  

Come per le mie aspettative, dovrebbe visualizzare il messaggio di errore nel giro segnaposto in forma.

Ma, Problema

Error on Chrome-Console: Uncaught TypeError: Cannot read property 'settings' of undefined

Si è anche dando errore su altri browser. Poi, ho cercato di capire, il problema e trovato:

$('.val-req').rules('add', {required:true}); # This is causing the error 

Come, per la mia comprensione e la documentazione -> Questo dovrebbe essere corretto.

Perché ciò causerebbe l'errore TypeE e cosa posso fare per risolverlo?

Answer 1

Penso che il tuo codice sia più complicato di quanto debba essere. Si dovrebbe solo chiamare validate sul documento pronto (supponendo che il modulo presente sul documento pronto):

$(document).ready(function() { 
    $(".val-req").addClass("required"); 
    $("#form_id").validate({ 
     errorElement: "span", 
     errorClass: "val-error", 
     validClass: "val-valid", 
     errorPlacement: function(error, element) { 
      $('#val-msg.' + $(element).attr('id')).html(error.html()); 
     }, 
     submitHandler: function() { 
      this.submit(); 
     } 
    }); 
});​ 

Esempio:http://jsfiddle.net/4vDGM/

Si potrebbe anche solo aggiungere una classe di required di elementi necessari, invece di aggiungendoli tramite JavaScript.

Un'altra cosa che potreste fare è aggiungere le regole nell'oggetto regole di opzioni s' validate:

$(document).ready(function() { 
    $("#form_id").validate({ 
     rules: { 
      myval: "required" 
     }, 
     errorElement: "span", 
     errorClass: "val-error", 
     validClass: "val-valid", 
     errorPlacement: function(error, element) { 
      $('#val-msg.' + $(element).attr('id')).html(error.html()); 
     }, 
     submitHandler: function() { 
      this.submit(); 
     } 
    }); 
});​ 

Esempio:http://jsfiddle.net/GsXnJ/

Answer 2

È necessario aggiungere le regole dopo aver chiamato il plugin validate nell'elemento di modulo:

$("form").validate() 
$(yourElement).rules("add", {...}) 

Answer 3

Il colpevole è il metodo delegato(), w che non controlla se esiste un validatore:

function delegate(event) { 
    var validator = $.data(this[0].form, "validator"), 
    eventType = "on" + event.type.replace(/^validate/, ""); 
    // this fixes handling the deleted validator: 
    if (!validator) return; 
    validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event); 
} 

Ero alla ricerca di una soluzione e l'ho trovata in un post sul blog.

Fonte: http://devio.wordpress.com/2012/07/18/fixing-jquery-validation-with-changing-validators/

Answer 4

stavo cercando di modificare le norme in materia di una forma che aveva già la convalida in fase di realizzazione, ma ho trovato il mio $ codice (document) .ready (...) stava eseguendo prima della principale è stata impostata la convalida del modulo, quindi l'aggiunta di un breve setTimeout ha risolto il problema per me, ad es

setTimeout(function() { 
    $(yourElement).rules("add", {...}) 
}, 100);