jQuery xác thực với số trường động

Question

Tôi có biểu mẫu có một số lượng động gồm các nhóm trường, trong đó số được dựa trên câu trả lời ở giai đoạn trước.

tôi là tạo ra các lĩnh vực server-side như một mảng, ví dụ:

<input id="foo[0]"... 
<input id="bar[0]"... 

<input id="foo[1]"... 
<input id="bar[1]"... 

<input id="foo[2]"... 
<input id="bar[2]"... etc 

Không có vấn đề số lượng, tất cả các trường được yêu cầu & Tôi cũng cần phải xác nhận đối với loại & số chữ số trong một số trường hợp. Tôi đang sử dụng jQuery validate plugin để xử lý phía máy khách (có, được sao lưu với công cụ phía máy chủ) & xác thực không thể thực hiện nội dòng vì biểu mẫu cần vượt qua XHTML Strict (EDIT: xem phụ lục của tôi bên dưới).

Vấn đề của tôi là tôi không thể biết cách sử dụng xác thực với số trường động. Dưới đây là những gì các cú pháp Validate thường trông giống như cho phần còn lại có dạng:

$(document).ready(function() { 

    // validate stage_form on keyup and submit 
    var validator = $("#form_id").validate({ 

     // rules for field names 
     rules: { 

      name: "required", 
      address: "required", 
      age: { required: true, number: true } 

     }, 

     // inline error messages for fields above 
     messages: { 

      name: "Please enter your name", 
      address: "Please enter your address", 
      age: { required: "Please enter your age", number: "Please enter a number" } 

     } 

    }); 

}); 

Answer 1

thực sự nó sẽ hoạt động Nếu bạn sử dụng các lớp thay vì khởi tạo quy tắc làm tùy chọn hợp lệ().

Markup:

<input id="foo[0]" class="required" 
<input id="bar[0]" class="required number" 

<input id="foo[1]" class="required" 
<input id="bar[1]" class="required email" 

jQuery:

$(document).ready(function() { 

    var validator = $("#form_id").validate({ 
    messages: { 
      name: "Please enter your name", 
      address: "Please enter your address", 
      age: { 
       required: "Please enter your age", 
       number: "Please enter a number" 
      } 

    } 

    }); 

}); 

hy vọng công trình này. Sinan.

Answer 2

Không câu trả lời vì vậy tôi sẽ gửi "tạm thời" của tôi giải pháp, mà là để thiết lập quy tắc xác nhận nội tuyến cho 'đòi hỏi' và 'loại' , để 'maxlength' để kiểm tra phía máy chủ, sau đó hiển thị thông báo tùy chỉnh với thẻ tiêu đề nội tuyến.

Điều này có thể đủ tốt cho các mục đích của công việc này, nhưng tôi vẫn tò mò nếu có một cách để làm điều đó 'hoàn toàn' trong jQuery.

Answer 3

Bạn đã cố gắng sử dụng custom class rules để xác định các quy tắc không tương thích xhtml?

Ví dụ trong docs chỉ sử dụng một lớp, nhưng tôi cho rằng bạn có thể kết hợp các lớp tùy chỉnh khác nhau để đạt được các quy tắc xác thực mà bạn cần. Tôi đã không thử điều này cho bản thân mình.

Answer 4

Tôi đã tìm cách sử dụng "siêu dữ liệu".

Điều này nên được sử dụng bên trong mẫu có tên động. Vì vậy, tôi không cần phải biết tên.

Nhược điểm vẫn không thể sử dụng mã với javascript thuần túy có thẻ sạch.

<script src="jquery.metadata.js" type="text/javascript"></script> 

<input validate="{required: true, email: true, messages: { required: 'i'm required', 'i'm not valid e-mail' }}" name="dynamicRow[ myRandomNumber ]"type="text" class="input_normal" /> 

$(function() { 
    // setup stuff 
    $.metadata.setType("attr", "validate"); 
}); 

Answer 5

Đây là một cách khác để thực hiện việc này.

/* Normal validate initialisation. */ 
$('#myForm').validate({ 

    /* Use the submitHandler method to add custom-selector-based validation. */ 
    submitHandler: function(form, ev) { 

     /* Find your dynamic field/s. Note that you may want to access them via a scope external to validate, as any selection you do in this internal scope will be static from the form's pre-edit state. */ 
     var el = $('#selector'); 

     /* Do your custom validation. */ 
     if ( el.val() !== 'A' ) { 

      /* Show any errors:- 'fieldname': 'error message'. */ 
      this.showErrors({ 
       'name-of-a-field-near-where-you-want-your-error-placed': 'Please enter "A" to continue' 
      }); 

      /* Prevent form submission. */ 
      return; 
     } 
    } 
});