使用Jquery Validate插件验证bootstrap-select

Question

我正面临着使用jquery validate plugin验证select使用bootstrap-select.js插件进行美化的问题.bootstrap-select.js期待类selectpicker并遵循一行代码:

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

用于美化选择html.

但是,它使用jquery validate插件导致验证问题.除非并且直到类selectpicker未被删除,否则select in not at all validated.删除类后,将正确执行验证.以下是我的选择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

我会尽力根据你所描述的内容回答你的问题,因为我相信我遇到了类似的问题,并且能够解决它.

首先,我假设您select使用该selectpicker()方法正确初始化了您.上面,你写道

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

但是你没有任何select课程元素selectpicker,所以我认为你的意思是

$('select').selectpicker();

当调用selectpicker(),引导将插入额外的元素(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]是不能隐藏的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 2

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