如何让 jquery 验证错误显示在 bootstrap-combobox 上？

Question

我一直在使用这个非常酷的 bootstrap-combobox 来自这里：https://github.com/danielfarrell/bootstrap-combobox

我目前有一个 .NET MVC 5 项目，它正在使用其开箱即用的验证（jquery 非干扰性验证），并且组合框控件不会显示任何验证错误。我的问题类似于这里的问题（不幸的是它没有答案）：boostrap combobox validation - is it possible?

我花了一些时间为它创建了一个 jsfiddle：http://jsfiddle.net/1doe359f/3/

HTML:

<form id="experiment" action="/" method="post">
<div class="form-group">
    <label class="control-label" for="PersonID">Person</label>
    <select class="form-control combobox" data-val="true" data-val-required="This field is required." id="PersonID" name="PersonID">
        <option value=""></option>
        <option value="5">Bruce Banner</option>
        <option value="9">Bugs Bunny</option>
        <option value="8">Daffy Duck</option>
        <option value="10">Elmer Fudd</option>
        <option value="6">Jean Grey</option>
        <option value="4">Clark Kent</option>
        <option value="3">Peter Parker</option>
        <option value="7">Scott Summers</option>
    </select> <span class="field-validation-valid" data-valmsg-for="PersonID" data-valmsg-replace="true"></span>
</div>
<p>
    <button type="submit" value="Save" role="button" class="btn btn-default" aria-disabled="false">Save</button>
</p>

Javascript:

var validator = {};
  $(document).ready(function () {
  $('.combobox').combobox();
  var $form = $("#experiment");
  // prevent form submission
  $form.submit(function (e) {
      e.preventDefault();
      return false;
  });
  validator = $form.validate();
});

如果您从控件的 class 中删除 "combobox" 并点击保存按钮，您会看到错误消息弹出，这是应该的。但是，当控件是组合框时它不会显示。

如何在使用此组合框控件时显示验证器错误？

通常我可以偶然发现这种事情，但是对于像我这样的 javascript 新手来说，这有太多的活动部分。如有任何帮助，我们将不胜感激！

Answer 1

我在该验证函数中使用了 errorPlacement 来处理特别烦躁的控件。

errorPlacement: function (error, element) {
                // Set positioning based on the elements position in the form
                var elem = $(element);
                // Check we have a valid error message
                if (!error.is(':empty')) {
                    if (elem.is(':combobox')){...logic here}

还有一些我使用过的控件周围有一个容器，这会导致错误被隐藏而不是显示在容器上。

Answer 2

我最终确实成功了，但这不是一个很好的解决方案。我在 bootstrap-combobox 代码中进行了此更改：

/* COMBOBOX PLUGIN DEFINITION
* =========================== */
$.fn.combobox = function ( option ) {
    return this.each(function () {
    var $this = $(this)
      , data = $this.data('combobox')
      , options = typeof option == 'object' && option;

    if (!data) { $this.data('combobox', (data = new Combobox(this, options))); }
    if (typeof option == 'string') { data[option](); }

    /* Added stuff to get jquery validation working */
    data.$element.attr("name", data.$source.attr("id"));
    data.$element.attr("data-val", data.$source.attr("data-val"));
    data.$element.attr("data-val-required", data.$source.attr("data-val-required"));
    data.$element.closest("form").removeData("validator").removeData("unobstrusiveValidation");
    $.validator.unobtrusive.parse(data.$element.closest("form"));
  });
};

这里的要点是，我将原始下拉列表（$source）中的相关属性（name、data-val、data-val-required）复制到组合框控件（$element），然后重置验证程序，以便它识别这个新制作的控件。

仅供参考：这不是一个好方法，因为它在 bootstrap-combobox 中创建了对 jquery 验证器的依赖，并且它不灵活（只会进行 'required' 检查).我采用此快捷方式的原因之一是生成的控件没有任何好的标识符，因此使用此银行引用要容易得多。

虽然它确实有效，但如果您只对组合框进行 'required' 检查并且只在项目中使用 jquery 验证，那么它就足够了。希望它至少能提供一些见解，以节省将来的时间。

如何让 jquery 验证错误显示在 bootstrap-combobox 上？

How do I get jquery validation errors to display on a bootstrap-combobox?

javascript

jquery

jquery-validate