Sprawdzanie poprawności jquery - Błąd podczas dodawania reguł do elementu wejściowego?

Question

Próbuję zaimplementować sprawdzanie poprawności jQuery z http://docs.jquery.com/Plugins/Validation:

Mój plan design:

• Moja wejście elementem:

  <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> 
  

• Następnie na dom gotowy:

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

• Walidacja metody:

  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 
       }); 
  } 
  

Zgodnie z moimi oczekiwaniami, powinien wyświetlić komunikat o błędzie w rozpiętości uchwytem miejsce w formularzu.

Ale Problem

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

Jest również daje błąd na innych przeglądarkach. Następnie próbowałem dowiedzieć out problem Znalezione

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

Jako, za mojego zrozumienia i dokumentacji -> To powinno być prawidłowe.

Dlaczego spowodowałoby to TypeError i co mogę zrobić, aby go rozwiązać?

Answer 1

Myślę, że Twój kod jest bardziej skomplikowany, niż powinien. Należy po prostu trzeba zadzwonić validate w dokumencie gotowy (zakładając swoją postać istnieje w dokumencie ready):

$(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(); 
     } 
    }); 
});​ 

Przykład:http://jsfiddle.net/4vDGM/

Można też po prostu dodać klasę required do wymaganych elementów zamiast dodawanie ich za pomocą JavaScript.

Inną rzeczą, jaką można zrobić, to dodać zasady w zasady przedmiotem opcji validate „s:

$(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(); 
     } 
    }); 
});​ 

Przykład:http://jsfiddle.net/GsXnJ/

Answer 2

Trzeba dodać reguły po wywołaniu plugin sprawdzania poprawności w elemencie formularza:

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

Answer 3

Winnym jest metoda delegate(), w hich nie sprawdza, czy istnieje weryfikator:

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); 
} 

Szukałem rozwiązania i znalazłem je w poście na blogu.

Źródło: http://devio.wordpress.com/2012/07/18/fixing-jquery-validation-with-changing-validators/

Answer 4

starałem się zmienić zasady na formularzu, który już miał walidacja tworzone, ale znalazłem mój kod $ (document) .ready (...) wykonywał przed głównym Forma sprawdzania poprawności została ustawiona, więc dodanie krótkiego setTimeout wyleczyło ten problem dla mnie - np

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