Trình xác thực jQuery - Cách xác thực đối với các mục không phải là biểu mẫu?

Question

Tôi có một biểu mẫu nơi người dùng có thể tiếp tục thêm các mục vào danh sách. Khi họ đi để gửi trang này, tôi muốn xác nhận rằng danh sách này thực sự có các mục trong đó (không phải các mục riêng lẻ như chúng đã được xác nhận). Mỗi mục được thêm vào một hàng mới trong một bảng với TR có một thuộc tính thêm "hành động" ... do đó, nó trông giống như:

<tr action="whatever">...</tr> 

Những gì tôi đã cố gắng để làm là thêm một addMethod tùy chỉnh mà gọi một hàm sẽ đếm số hàng có hành động dưới dạng thuộc tính:

$("#tableID").find("tr[action]").length 

và nếu chiều dài đó lớn hơn 0 thì trả về true, ngược lại, sai.

Điều này hoạt động tốt ngoài các cuộc gọi của trình xác thực nhưng vì lý do nào đó, nó hoàn toàn bỏ qua nó.

Tôi thực sự có thể sử dụng một ví dụ hoặc một số thông tin chi tiết về cách làm cho nó xác thực quy tắc này mặc dù nó không phải là một phần tử biểu mẫu cụ thể.

Scaled xuống mã:

* lưu ý rằng tôi đã có giá trị mặc định được thiết lập cho các thông điệp và những gì không.

$.validator.addMethod("validProductList", function (value, element) { 
     return this.optional(element) || validateProductList(); 
    }, "You have no products in your list"); 

$("#processForm").click(function() { 
     $("#pageForm").validate({ 
      submitHandler: function() { 
       $("#errors").hide(); 
       //processPage(); 
      }, 
      rules: { 
       //other rules, 
       validProductList: true 
      } 
     }); 
    }); 

function validateProductList() { 
    var isValid = false; 
    var useList = $("#tblAddedProducts").find("tr[action]").length; 
    if (useList > 0) { isValid = true; } 
    return isValid; 
} 

Answer 1

Lý do này không làm việc là vì các quy tắc đối tượng hy vọng con của nó là tên trường biểu mẫu (không loại trừ tên). Có vẻ như xác thực không có khả năng xác thực các thành phần không phải là form. Tuy nhiên, có một cách bạn có thể giải quyết vấn đề này:

1. Thêm <input type='hidden' /> vào biểu mẫu mà bạn cập nhật tùy thuộc vào trạng thái của danh sách. Nói cách khác, mỗi lần bạn thêm hoặc xóa một mục danh sách, hãy đặt giá trị của đầu vào đó. Điều này có một bất lợi rõ ràng; mã xác thực của bạn hiện được trải rộng trên hai hành động (thêm và xóa các mục danh sách). Tuy nhiên, tôi tưởng tượng bạn đã có mã xử lý việc thêm/xóa, bạn có thể thêm một phương thức phổ biến đánh giá lại trạng thái của số input nói trên.

2. Hãy yêu cầu input yêu cầu và sử dụng .validate() bình thường.

Dưới đây là một ví dụ làm việc thực sự khó khăn: http://jsfiddle.net/dT6Yd/

Bạn có thể thực hiện mục (1) một chút dễ dàng hơn nếu bạn sử dụng một khuôn khổ như knockoutjs. Bạn có thể nói rằng khung để "quan sát" danh sách của bạn và tự động cập nhật đầu vào mà không cần phải theo dõi nó.

Không phải là cách xử lý vấn đề một cách rõ ràng nhất, nhưng tôi đã thấy nó được thực hiện theo cách này trước đây và dường như nó hoạt động tốt.

Answer 2

Tôi đã tìm thấy một giải pháp trong mã nguồn:

return $(this.currentForm) 
     .find("input, select, textarea, [contenteditable]") 

Vì vậy, jquery-validation chỉ mất các loại yếu tố .. Tôi chỉ cần thêm thuộc tính "contenteditable" đến các yếu tố tôi muốn xác nhận và đã thêm trình xác thực tùy chỉnh.

<div contenteditable data-rule-raty="true" data-score="0" data-plugin="rating"></div> 

$.validator.addMethod("raty-required", function (value, element, regexpr) { 
    return $(element).raty("score") >= 0; 
}, "Bitte Bewertung abgegeben");