Проверка bootstrap-select с использованием JQuery Validate plugin

Question

У меня возникла проблема проверки правильности выбора, которая украшена с использованием модуля bootstrap-select.js с использованием плагина jquery validate. самозагрузки-select.js ожидает класса selectpicker и после одной строки кода:

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

для украшая выберите из HTML.

Однако это вызывает проблемы при проверке с использованием плагина проверки подлинности jquery. Выбирать не проверяется, если и до тех пор, пока класс selectpicker не будет удален. После того, как класс удален, проверки корректно выполняются. Ниже мой HTML для выбора:

<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> 

и Ниже приводится 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; 
    } 
}); 

Я попытался сделать это, написав специальный метод для этого также, но это бесполезно.

Answer 1

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

Answer 2

Я сделаю все возможное, чтобы ответить на ваш вопрос, исходя из того, что вы описали, потому что я считаю, что столкнулся с подобной проблемой и смог ее решить.

Во-первых, я предполагаю, что вы правильно инициализировали свой select методом selectpicker(). Выше, Вы писали

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

Но у вас нет никаких select элементов с классом selectpicker, так что я думаю, что вы имели в виду, чтобы написать был

$('select').selectpicker(); 

При вызове selectpicker(), Bootstrap будет вставлять дополнительные элементы (div, button, span, ul, и li) после вашего select элемент. Но учтите, что Bootstrap тогда hide() ваш оригинальный select элемент. Поскольку ваш select скрыт, JQuery Validate игнорирует его проверку при отправке формы. Это главный вопрос.

Сказать Jquery Validate не игнорировать ваши скрытые выбора входов, вы можете сделать следующее ...

// 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)'; 

Почему вы также должны включать input:visible и textarea:visible? Раньше установка должна была игнорировать все скрытые входы. Если вы только проигнорировали (а) :not(select:hidden), Вы должны были бы игнорировать ввод, который не скрыть select. Это тоже разрешающий, тем не менее, так как видимый input[type=text] is не скрыть select. Таким образом, он также будет проигнорирован.То, что мы хотим, чтобы игнорировать любой элемент, который:

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

Чтобы соответствовать все это в селекторе :not, вы хотите игнорировать любой элемент, который:

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

Поэтому ...

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

Answer 3

Вот что работает безупречно для меня:

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> 

Объяснение:

НАБЛЮДЕНИЯ: на основе установления ответа @Alvin Lee «S ignore опции на элементе формы были в порядке, но имели свои оговорки;

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

Проблема: Выбора: элемент самозагрузки получил подтвержден, но показал сообщение по умолчанию This field is required на любом другом элементе ввода, а не перекрывая его со всеми сообщениями пользовательской проверки, которые ранее были настроены.

Исправление: переместить ignore установки в $.validator.setDefaults({...}) блока ... Это должно сделать это!

Answer 4

Вот простое решение, которое работает для меня:

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

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

Вот это