7

我面临使用 jquery validate 插件验证使用 bootstrap-select.js 插件美化的选择的问题。bootstrap-select.js 期待类 selectpicker 并遵循一行代码：

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

用于美化 html 的选择。

但是，它会导致使用 jquery validate 插件进行验证时出现问题。除非和直到类 selectpicker 未删除，否则根本不会验证 select。删除类后，将正确执行验证。以下是我的选择 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

4 回答 4

20

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

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

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

但是您没有任何select带有 class 的元素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:visibleand 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)';
于 2013-11-09T06:28:16.903 回答
6 
$('#frm_editCategory').validate({
    ignore: ":hidden:not(.selectpicker)"
});
于 2013-09-22T22:26:18.683 回答
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({...})块中......应该这样做！

于 2015-02-06T12:11:33.523 回答
2

这是对我有用的简单解决方案：

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

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

而已

于 2017-01-03T18:48:31.217 回答