Xác nhận tính năng bootstrap-select bằng cách sử dụng plugin Jquery Validate

Question

Tôi đang gặp sự cố để xác thực lựa chọn được làm đẹp bằng plugin bootstrap-select.js bằng cách sử dụng plugin xác thực jquery. bootstrap-select.js đang chờ lớp selectpicker và sau một dòng mã:

$('.selectpicker').selectpicker(); 

để làm đẹp chọn html.

Tuy nhiên, việc này đang gây ra sự cố trong xác thực bằng cách sử dụng plugin xác thực jquery. Việc chọn không phải ở tất cả các xác nhận trừ khi và cho đến khi lớp selectpicker trong không bị loại bỏ. Sau khi lớp được loại bỏ, các xác nhận hợp lệ được thực hiện đúng. Sau đây là html của tôi cho chọn:

<select class="input-medium required" id="editCategory_sltCategoryName" 
name="editCategory_sltCategoryName"> 
    <option value=""> 
     Select Category 
    </option> 
    <option> 
     Reusable Components 
    </option> 
    <option> 
     BU Connects 
    </option> 
</select> 

và sau đây là js:

$('#frm_editCategory').validate({ 
    rules: { 
     editCategory_sltbuName: { 
      required: true 
     }, 
     editCategory_sltCategoryName: { 
      required: true 
     }, 
     editCategory_categoryName: { 
      minlength: 2, 
      required: true, 
      buname: true 
     }, 
     editCategory_categoryDescription: { 
      minlength: 2, 
      required: true, 
      buname: true 
     } 
    }, 
    highlight: function(element) { 
     $(element).closest('.control-group') 
      .removeClass('success').addClass('error'); 
    }, 
    success: function(element) { 
     element.text('OK!').addClass('valid') 
      .closest('.control-group') 
      .removeClass('error').addClass('success'); 
    }, 
    submitHandler: function(event) { 
     return true; 
    } 
}); 

Tôi đã cố gắng để làm điều đó bằng cách viết phương pháp tùy chỉnh cho nó cũng nhưng nó là không sử dụng.

Answer 1

$('#frm_editCategory').validate({ 
    ignore: ":hidden:not(.selectpicker)" 
}); 

Answer 2

Tôi sẽ cố hết sức để trả lời câu hỏi của bạn dựa trên những gì bạn đã mô tả, bởi vì tôi tin rằng tôi đã gặp phải sự cố tương tự và có thể giải quyết vấn đề đó.

Trước tiên, tôi giả định rằng bạn đã khởi tạo chính xác select bằng phương thức selectpicker(). Ở trên, bạn đã viết

$('.selectpicker').selectpicker(); 

Nhưng bạn không có bất kỳ select yếu tố với lớp selectpicker, vì vậy tôi nghĩ rằng những gì bạn có nghĩa là để viết là

$('select').selectpicker(); 

Khi bạn gọi selectpicker(), Bootstrap sẽ chèn các yếu tố bổ sung (div, button, span, ul và li) sau phần tử select của bạn. Nhưng lưu ý rằng, Bootstrap sau đó sẽ hide() nguyên tố select ban đầu của bạn. Bởi vì select của bạn bị ẩn, Xác thực JQuery sẽ bỏ qua xác thực khi biểu mẫu được gửi. Đây là vấn đề chính.

Để nói Jquery Validate không bỏ qua chọn đầu vào ẩn của bạn, bạn có thể làm như sau ...

// Initialize form validation rules, submit handler, etc. 
$('#frm_editCategory').validate({ 
    . 
    . 
    . 
}); 

// The default value for $('#frm_editCategory').validate().settings.ignore 
// is ':hidden'. Log this to the console to verify: 
console.log($('#frm_editCategory').validate().settings.ignore); 

// Set validator to NOT ignore hidden selects 
$('#frm_editCategory').validate().settings.ignore = 
    ':not(select:hidden, input:visible, textarea:visible)'; 

Tại sao bạn cũng cần phải bao gồm input:visible và textarea:visible? Trước đây, cài đặt là bỏ qua tất cả các đầu vào bị ẩn. Nếu bạn chỉ bỏ qua :not(select:hidden), bạn sẽ bỏ qua bất kỳ đầu vào nào là không phải bị ẩn select. Tuy nhiên, đây là quá cho phép bởi vì một hiển thị input[type=text] là không phải bị ẩn select. Vì vậy, nó cũng sẽ bị bỏ qua.Điều chúng tôi muốn là để bỏ qua bất kỳ yếu tố đó:

- is *not* a hidden `select` 
- *is* a hidden `input` 
- *is* a hidden `textarea` 

Để phù hợp với tất cả điều này thành một selector :not, bạn muốn bỏ qua bất kỳ yếu tố đó:

- is *not* a hidden `select` 
- is *not* a visible `input` 
- is *not* a visible `textarea` 

Do đó ...

$('#frm_editCategory').validate().settings.ignore = 
    ':not(select:hidden, input:visible, textarea:visible)'; 

Answer 3

Đây là những gì hiệu quả với tôi:

jQuery/javascript:

$(document).ready(function() { 
    $.validator.setDefaults({ 
     /*OBSERVATION: note how the ignore option is placed in here*/ 
     ignore: ':not(select:hidden, input:visible, textarea:visible)', 

     /*...other options omitted to focus on the OP...*/ 

     errorPlacement: function (error, element) { 
      if (element.hasClass('bs-select')) { 
       error.insertAfter('.bootstrap-select'); 
      } else { 
       error.insertAfter(element); 
      } 
      /*Add other (if...else...) conditions depending on your 
      * validation styling requirements*/ 
     } 
    }); 

    $('#myform').validate({ 
     rules: { 
      'year': { 
       required: true 
      } 
     }, 
     messages: { 
      'year': { 
       required: 'Please select a year from the dropdown' 
      } 
     } 
    }); 
}); 

HTML:

<select class="input-medium bs-select required"> 
    <option value="">Select Category</option> 
    <option>Innovation</option> 
    <option>Reusable Components</option> 
    <option>BU Connects</option> 
</select> 

Giải thích:

QUAN TRẮC: Dựa trên câu trả lời @Alvin Lee 's thiết lập ignore tùy chọn trên phần tử biểu mẫu như sau là ok, nhưng đã cẩn thận;

$('#myform').validate().settings.ignore = 
    ':not(select:hidden, input:visible, textarea:visible)'; 

Vấn đề: Các yếu tố chọn bootstrap đã xác nhận nhưng cho thấy thông điệp mặc định This field is required trên tất cả các yếu tố đầu vào khác thay vì ghi đè bằng tất cả các tin nhắn xác nhận tùy chỉnh đã được cấu hình từ trước.

Việc sửa chữa: di chuyển ignore thiết lập vào $.validator.setDefaults({...}) khối ... Điều đó sẽ làm điều đó!

Answer 4

Đây là giải pháp đơn giản mà làm việc cho tôi:

var validator = $('#frm_editCategory').validate({ 
    . 
    . 
    . 
}); 

$('select.input-medium').on('change', function() { 
    validator.element($(this)); 
}); 

Vậy đó