jQuery Xác thực không đánh giá tất cả các trường

Question

Tôi đang làm việc trên bố cục mới cho một trang là hệ thống đặt hàng dựa trên thuật sĩ cho khách hàng. Họ đặt hàng các loại vật liệu nhưng các vật liệu này có thể được nhóm lại với nhau trong quá trình đặt hàng sao cho họ có thể đặt hàng 10 vật dụng trong bất kỳ sự kết hợp nào của màu đỏ, xanh dương, và/hoặc, xanh lá cây chẳng hạn. Tổng số các trường không được vượt quá số tối đa được tính trước. Hầu hết các tài liệu là một lựa chọn đơn giản cho mỗi nhóm.

Tôi đã sử dụng jQuery xác thực trong các trang khác và tôi đã sử dụng phương thức addClassRules để xác thực tất cả các yếu tố đầu vào trên trang và nó hoạt động tốt. Ví dụ hiện tại tôi đang làm là gây khó khăn cho tôi vì nó chỉ bắt lỗi thất bại đầu tiên khi gửi biểu mẫu nhưng sau khi gửi nó sẽ thường bắt người khác, nhưng không bao giờ liệt kê đầy đủ các thất bại xác nhận.

Dưới đây là mẫu jsfiddle của tôi để bạn có thể nhìn thấy những gì tôi đang đặt lại với nhau: http://jsfiddle.net/brianmat/2nV5u/

tôi sử dụng một đoạn mã đếm lỗi đã làm việc trên một số trang web mà không có một vấn đề. Trong ví dụ này, tôi chỉ nhận được 1 lỗi ngay cả khi tất cả 7 hộp văn bản đã được để trống.

Sự khác biệt chính duy nhất của tôi ở đây là tôi đang thực hiện một rowpan để nhóm các mục của tôi, nhưng tôi không thể thấy nơi đó sẽ là một vấn đề. Tôi biết điều này sẽ kết thúc được một cái gì đó khá đơn giản, nhưng tôi chỉ cần nhấn một bức tường vào nó vào thời điểm này.

Các jQuery xác nhận đang có gì lạ mắt:

$.validator.addClassRules({ 
    NumericInput: { 
     required: true 
    } 
}); 

$("#theForm").validate({ 
    invalidHandler: function(e, validator) { 
     var errors = validator.numberOfInvalids(); 
     if (errors) { 
      var message = errors == 1 ? 'You missed 1 field. It has been highlighted below' : 'You missed ' + errors + ' fields. They have been highlighted below'; 
      $("div.error span").html(message); 
      $("div.error").show(); 
     } else { 
      $("div.error").hide(); 
     } 
    }, 
    errorPlacement: function(error, element) {}, 
    submitHandler: function(form) { 
     $("div.error").hide(); 
     form.submit(); 
    } 
}); 

Mã còn lại chỉ đơn giản là xử lý các subtotaling và số chỉ nhập dữ liệu.

Tôi hoàn toàn mở ra một cách tiếp cận khác để xử lý vấn đề này, vì vậy hãy loại bỏ mã hiện tại của tôi và tìm một thứ hoạt động đúng cách không phải là vấn đề. Tôi không muốn cố gắng để phù hợp với một hình vuông peg vào một lỗ tròn nếu đó là những gì tôi cuối cùng đang làm.

Answer 1

Đừng quên rằng pesky name thuộc tính:

<input id="Text1" name="Text1" type="text" class="NumericInput group1" materialgroup="1" /> 
<!--    ^^ --> 

Cập nhật Ví dụ:http://jsfiddle.net/2nV5u/6/

Ngoài ra, xem xét sử dụng data-* thuộc tính thay vì thêm thuộc tính của riêng bạn để các yếu tố (ví dụ data-materialgroup thay vì materialgroup).