Làm thế nào để sử dụng jquery.Validate với một jquery.multiselect Dropdown?

Question

Vì vậy, tình huống này là: cố gắng thêm hộp thả xuống bằng cách sử dụng plugin jquery.multiselect trên biểu mẫu hiện tại sử dụng plugin jquery.validate có các trường khác (trường nhập văn bản, đầu vào văn bản đơn có phạm vi giá trị float) mà tất cả hiện đang xác thực đúng.

Khi tôi cố gắng thêm quy tắc xác thực, tôi chỉ đơn giản là không thể nhận được jquery.validate để xác thực danh sách thả xuống nhiều lựa chọn của tôi. Dưới đây là đoạn mã của tôi (tất cả các giả định rằng các plugin cần được nạp - xem dưới đây để biết các phiên bản sử dụng):

HTML:

<form action="some/action" id="myForm" method="POST"> 
    Input 1: <input type="text" value="" name="input1" maxlength="200" id="input1"><br/> 
    Input 2: <input type="text" value="" name="input2" maxlength="100" id="input2"><br/> 
    Input 3: <input type="text" value="" name="input3" maxlength="50" id="input3"><br/> 
    Select: <select class="someSelect" name="mySelect" id="mySelect" multiple="multiple"> 
     <option value="some_val1">Some Value</option> 
     <option value="some_val2">Some Other Value</option> 
    </select> 
    <input type="submit" value="Submit" /> 
</form> 

Các Javascript:

$(document).ready(function() { 
    $('#mySelect').multiselect({ 
     noneSelectedText: 'Select Something (required)', 
     selectedList: 3, 
     classes: 'my-select' 
    }); 

    $.validator.addMethod("needsSelection", function(value, element) { 
     return $(element).multiselect("getChecked").length > 0; 
    }); 

    $.validator.addMethod("isPercent", function(value, element) { 
     return parseFloat(value) >= 0 && parseFloat(value) <= 100; 
    }); 

    $.validator.messages.needsSelection = 'You gotta pick something.'; 
    $.validator.messages.isPercent = 'Must be between 0% and 100%'; 

    $('#myForm').validate({ 
     rules: { 
      mySelect: "required needsSelection", 
      input1: "required isPercent", 
      input2: "required", 
      input3: "required" 
     }, 
     errorClass: 'invalid' 
    }); 
}); 

Phiên bản Nếu có sự cố rõ ràng/đã biết với khả năng tương thích giữa các phiên bản, thì tôi có thể upgra Nếu điều đó giải quyết được vấn đề, nhưng tôi đã thử nghiệm bằng cách sử dụng các phiên bản mới nhất cho mục đích của mình và nó dường như không giải quyết được vấn đề của tôi.

jQuery: 1.4.4

jquery.validate: 1.9.0

jquery.multiselect: 1.8

Và, như mọi khi, tôi có thể cung cấp thêm thông tin ở đâu có thể/cần thiết.

Answer 1

Vì vậy, có vẻ như rằng các quy tắc tôi đã thiết lập cho multiselect đã thực sự được gắn liền với các lựa chọn, tuy nhiên, vì hộp chọn ban đầu là :hidden bởi jquery.multiselect, jquery.validate theo mặc định, bỏ qua mọi đầu vào bị ẩn.

Giải pháp (không phải của riêng tôi - đồng nghiệp tìm thấy nó) là sử dụng cài đặt ignore cho jquery.validate. Dù chọn được truyền với các thiết lập ignore được đưa vào một jquery .not(), vì vậy giải pháp là thực sự sử dụng một đôi tiêu cực ở đây:

$('#myForm').validate({ 
    rules: { 
     mySelect: "required needsSelection", 
     input1: "required isPercent", 
     input2: "required", 
     input3: "required" 
    }, 
    ignore: ':hidden:not("#mySelect")', //Tells it to check the hidden select 
    errorClass: 'invalid' 
}); 

Phew!

Answer 2

Dường như với tôi, hai tùy chọn được chọn của bạn có giá trị.

value="some_val1" 

Hãy thử thêm một tùy chọn ở phía trên với giá trị là gì và chọn:

<option selected="" value="">Please Select Something</option> 

Answer 3

Một giải pháp khả thi là để xác định rõ ràng các yếu tố để xác nhận:

$("form").children("input, select, textarea").valid() 

Điều đó sẽ xác nhận các ẩn chọn là tốt.

Trong thực tế, tình hình tôi chỉ gặp phải không có cách nào khác vì tôi muốn xác nhận bởi một phần cho một hình thức nhiều bước:

$("form").find("[data-stepIndex='1']").children("input, select, textarea").valid() 

Hy vọng nó sẽ giúp người