Validation of bootstrap-select using Jquery Validate plugin

jquery-plugins

Solution

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

Problem

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.

Original source