使用Jquery Validate插件验证bootstrap-select

时间:2013-08-19 13:38:42

标签: jquery-plugins

我正面临着使用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;
    }
});

我已经尝试过为它编写自定义方法,但它没用。

4 个答案:

答案 0 :(得分:18)

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

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

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

但是你没有selectselectpicker个元素,所以我想你的意思是

$('select').selectpicker();

当您致电selectpicker()时,Bootstrap会在之后插入其他元素(divbuttonspanulli)你的select元素。但请注意, Bootstrap将hide()原始select元素由于隐藏了select,因此JQuery Validate会在提交表单时忽略对其的验证。这是主要问题。

要告诉Jquery验证忽略隐藏的选择输入,您可以执行以下操作...

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

答案 1 :(得分:4)

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

答案 2 :(得分:4)

这对我来说是完美无缺的:

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的答案设置表单元素上的ignore选项,如下所示,但有其警告;

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

问题: 引导选择元素已经过验证,但在每个其他输入元素上显示默认消息This field is required,而不是使用所有自定义验证覆盖它先前配置的消息。

修复: ignore设置移至$.validator.setDefaults({...})块...应该这样做!

答案 3 :(得分:2)

这是一个对我有用的简单解决方案:

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

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

那是