11

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

我已将 jquery 验证器默认设置为样式引导 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”选择是引导字段，而“colors”选择是 select2 字段。

在此处输入图像描述

我尝试搜索其他 SO，但所有这些都使用 select2 的 3.5.xx 版本

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

http://jsfiddle.net/z49mb6wr/

4

5 回答 5

25

我尝试搜索其他 SO，但所有这些都使用 select2 的 3.5.xx 版本

各种版本没有秘方；你只需要弄清楚你的情况。这意味着您需要检查渲染的 DOM，以便知道要定位哪些元素以及如何定位它们。

我不声称下面的代码对你有用；这只是一个如何攻击这种情况的例子。

  1. 编写针对呈现的 Select2 元素的 CSS。因此，只要父容器具有 class has-error， Select2 元素就会被设置为这样的样式。

    .has-error .select2-selection {
    border: 1px solid #a94442;
    border-radius: 4px;
}

  2. 要在 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
    }
}

  3. 最后，由于与 Select2 的交互没有 jQuery Validate 插件自动捕获的任何事件，因此您必须编写自定义事件处理程序并以编程方式触发验证。

    $('.select2').on('change', function() {
    $(this).valid();
});

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

于 2015-06-11T15:37:41.200 回答
3

对@Sparky 的解决方案的一个小修改- 除了弄清楚最新的 jquery validate(:P) 使用的类error和日期之外，我不相信这一点：valid

/*! 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随心所欲地在课堂上使用 CSS 。

于 2017-04-01T06:53:10.980 回答
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);
}
于 2016-12-02T01:06:20.743 回答
0

尝试在 4.1 RC0 上提出的所有解决方案，似乎没有一个可行。因为我确实使用了 Jquery（并且是强制性的），所以这是我的解决方案：我在一个 div 之后放置了一个名为“error-insert-after”的类，并且在 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);
            }

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

于 2021-11-15T12:11:07.787 回答
0

为您的 select2 元素提供类并在 errorPlacement 中使用该类。

例如，在下面的下拉列表中，我select2_custom_class为 select2 元素提供了类

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

并在 errorPlacement 中使用该类

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);
  }
}
于 2021-07-09T05:41:35.910 回答