Validation of bootstrap-select using Jquery Validate plugin

Question

I am facing problem to validate select which is beautified using bootstrap-select.js plugin using jquery validate plugin. bootstrap-select.js is expecting class selectpicker and following one line of code:

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

for beautifying select of html.

However it is causing problem in validations using jquery validate plugin. The select in not at all validated unless and untill class selectpicker in not removed. Once class is removed then validations are properly performed. Following is my html for select:

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

and following is the 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;
    }
});

I have tried to do it by writing custom method for it also but it is of no use.

Answer 1

I'll do my best to answer your question based on what you've described, because I believe I have encountered a similar issue and been able to resolve it.

First, I'm assuming that you correctly initialized your select with the selectpicker() method. Above, you wrote

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

But you do not have any select elements with class selectpicker, so I think what you meant to write was

$('select').selectpicker();

When you call selectpicker(), Bootstrap will insert additional elements (div, button, span, ul, and li) after your select element. But note that, Bootstrap will then hide() your original select element. Because your select is hidden, JQuery Validate will ignore validation of it when the form is submitted. This is the main issue.

To tell Jquery Validate not to ignore your hidden select inputs, you can do the following...

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

Why do you also need to include input:visible and textarea:visible? Before, the setting was to ignore all hidden inputs. If you only ignored :not(select:hidden), you would ignore any input which is not a hidden select. This is too permissive, though, because a visible input[type=text] is not a hidden select. So, it also would get ignored. What we want is to ignore any element which:

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

To fit this all into a :not selector, you want to ignore any element which:

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

Therefore...

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

Answer 2

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