使用 Select2 4.0 和 Bootstrap 3+ 进行样式设置 jQuery 验证

Question

我有一个项目使用 Bootstrap 3.3.4、Select2 4.0 和 Jquery Validation 1.13.1

我已将 jquery 验证器默认设置为 bootstrap 3 类样式

 $.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-block",

    highlight: function (element, errorClass, validClass) {
    $(element).addClass(errorClass);
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    unhighlight: function (element, errorClass, validClass) {
    $(element).removeClass(errorClass);
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    },

    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
           error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }

    }
});

但是这些默认值不会将 select2 个字段设置为相同的样式...在下图中，"metals" select 是一个 bootstrap 字段，而"colors" select 是一个 select2 字段。

我尝试搜索其他 SO，但所有这些都使用 select2

的 3.5.xx 版本

我包含了图中示例的 jsfiddle，我正在寻找对验证器默认值的调整以使 select2 看起来统一

http://jsfiddle.net/z49mb6wr/

Answer 1

I tried searching other SO's, but all of these use the 3.5.xx version of select2

各种版本没有秘方，大家根据自己的情况自己想办法。这意味着您需要检查呈现的 DOM 以便您知道要定位哪些元素以及如何定位它们。

我并不是说下面的代码对你有用；这只是一个如何应对这种情况的例子。

写入 CSS 以呈现的 Select2 元素为目标。因此，只要父容器具有 class has-error，Select2 元素的样式就会如此。
```
.has-error .select2-selection {
    border: 1px solid #a94442;
    border-radius: 4px;
}
```

要在之后显示错误消息，Select2 元素只需要 errorPlacement 选项中的另一个条件以及一些 jQuery DOM遍历。

errorPlacement: function (error, element) {
    if (element.parent('.input-group').length) { 
        error.insertAfter(element.parent());      // radio/checkbox?
    } else if (element.hasClass('select2')) {     
        error.insertAfter(element.next('span'));  // select2
    } else {                                      
        error.insertAfter(element);               // default
    }
}

最后，由于与 Select2 的交互没有 jQuery Validate 插件自动捕获的任何事件，您将必须编写自定义事件处理程序并以编程方式触发验证。
```
$('.select2').on('change', function() {
    $(this).valid();
});
```

工作演示：http://jsfiddle.net/z49mb6wr/1/

Answer 2

Sparky 的回答对我不起作用，所以我将其修改为以下内容：

if (element.hasClass('select2-hidden-accessible')) {
    error.insertAfter(element.closest('.has-error').find('.select2'));
} else if (element.parent('.input-group').length) { 
    error.insertAfter(element.parent());
} else {                                      
    error.insertAfter(element);
}

Answer 3

对的一个小修改 - 除了弄清楚 error 和 valid classes 被最新的 jquery 验证（：P）日期：

/*! jQuery Validation Plugin - v1.16.0 - 12/2/2016
 * http://jqueryvalidation.org/
 * Copyright (c) 2016 Jörn Zaefferer; Licensed MIT */

现在代码：

$('#MyForm').validate({
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) { 
            error.insertAfter(element.parent());      // radio/checkbox?
        } else if (element.hasClass('select2-hidden-accessible')) {     
            error.insertAfter(element.next('span'));  // select2
            element.next('span').addClass('error').removeClass('valid');
        } else {                                      
            error.insertAfter(element);               // default
        }
    }
});

// add valid and remove error classes on select2 element if valid
$('.select2-hidden-accessible').on('change', function() {
    if($(this).valid()) {
        $(this).next('span').removeClass('error').addClass('valid');
    }
});

在 error class 上使用 CSS 随心所欲。

Answer 4

将 class 赋给您的 select2 元素并在 errorPlacement 中使用 class。

例如，在下面的下拉列表中，我为 select2 元素

提供了 select2_custom_class class

<select type="text" id="test1" class="form-control select2_custom_class">
    <option value="">Select</option>
</select>

并在 errorPlacement

中使用 class

errorPlacement: function (error, element) {
  if(element.hasClass('select2_custom_class')) {
    error.insertAfter(element.next('.select2-container'));
    // OR
    error.insertAfter(element.next('span'));
  }
  else {
    error.insertAfter(element);
  }
}

Answer 5

尝试在 4.1 RC0 上提出的所有解决方案，none 似乎有效。由于我确实使用 Jquery （并且是强制性的），因此这是我的解决方案：我在 div 之后放置了一个名为“error-insert-after”的 class，在 errorPlacement 中，我有：

errorPlacement: function (error, element) {
            // Add the `invalid-feedback` class to the error element
            error.addClass("invalid-feedback");
            if (element.prop("type") === "checkbox") {
                error.insertAfter(element.next("label"));
            } else {
                error.insertAfter(element);
            }
            if (element.hasClass('select2-hidden-accessible')) {
                error.insertAfter($('.error-insert-after'));
            } else if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
                error.insertAfter(element.parent().parent());
            } else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
                error.appendTo(element.parent().parent());
            } else {
                error.insertAfter(element);
            }

因为我只有一个字段要验证，所以对我来说足够了。出于某种原因，next 不起作用，这可能是我的设置，但是，如果它对某人有帮助，欢迎您。

使用 Select2 4.0 和 Bootstrap 3+ 进行样式设置 jQuery 验证

Styling jQuery Validation with Select2 4.0 and Bootstrap 3+

css

jquery

jquery-validate

twitter-bootstrap-3

jquery-select2-4