Xác nhận Jquery - Lỗi khi thêm quy tắc vào yếu tố đầu vào?

Question

Tôi cố gắng để thực hiện xác nhận Jquery với http://docs.jquery.com/Plugins/Validation:

án thiết kế của tôi:

• My đầu vào yếu tố:

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

• Sau đó, trên dom đã sẵn sàng:

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

• phương pháp 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 
       }); 
  } 
  

Theo mong đợi của tôi, nó sẽ hiển thị thông báo lỗi trong khoảng thời gian giữ chỗ trong biểu mẫu.

Nhưng, Vấn đề

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

Nó cũng được đưa ra lỗi trên các trình duyệt khác. Sau đó, tôi đã cố gắng để tìm ra vấn đề và tìm thấy:

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

As, mỗi sự hiểu biết và tài liệu của tôi -> Điều này cần được chính xác.

Tại sao điều này gây ra lỗi TypeError và tôi có thể làm gì để giải quyết vấn đề này?

Answer 1

Tôi nghĩ rằng mã của bạn phức tạp hơn mức cần thiết. Bạn chỉ cần phải gọi validate trên tài liệu đã sẵn sàng (giả dạng của bạn tồn tại trên tài liệu sẵn sàng):

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

Ví dụ:http://jsfiddle.net/4vDGM/

Bạn cũng có thể chỉ cần thêm một lớp của required đến các yếu tố cần thiết thay vì thêm chúng thông qua JavaScript.

Một điều bạn có thể làm là thêm các quy tắc trong đối tượng quy tắc lựa chọn 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(); 
     } 
    }); 
});​ 

Ví dụ:http://jsfiddle.net/GsXnJ/

Answer 2

Bạn phải bổ sung các quy tắc sau bạn gọi các plugin Validate trong phần tử biểu mẫu:

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

Answer 3

Thủ phạm là phương thức đại biểu(), w hich không kiểm tra xem trình xác thực có tồn tại hay không:

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

Tôi đang tìm kiếm giải pháp và tìm thấy nó trong bài đăng trên blog.

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

Answer 4

Tôi đã cố gắng để thay đổi các quy tắc trên hình thức mà đã có xác nhận được thiết lập, nhưng tôi tìm thấy $ (document) .ready (...) mã của tôi đã được thực hiện trước khi chính xác thực biểu mẫu đã được thiết lập, vì vậy việc thêm một setTimeout ngắn đã giải quyết vấn đề này cho tôi - ví dụ:

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