Question

我从这里开始使用这个非常酷的bootstrap-combobox：https://github.com/danielfarrell/bootstrap-combobox

我目前有一个.NET MVC 5项目，该项目使用开箱即用的验证（jquery unobstrusive validation），并且任何验证错误都不会出现在combobox控件中。我的问题类似于这里的问题（遗憾的是它没有答案）：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();
});

如果你删除＆＃34; combobox＆＃34;从控件的类中点击保存按钮，您可以看到弹出的错误消息。但是，当控件是组合框时，它不会显示出来。

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

通常我可以偶然发现这种事情，但这对于像我这样的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"));
  });
};

这里的gyst是我将相关属性（name，data-val，data-val-required）从原始下拉列表（$ source）复制到组合框控件（$ element），然后我重置验证器它承认这个新制造的控制。

仅供参考：这不是一个很好的方法，因为它在bootstrap-combobox中创建了对jquery验证器的依赖，而且它是不灵活的（只会执行＆＃39; required＆＃39; check）。我采用这种快捷方式的一个原因是生成的控件没有任何好的标识符，所以使用这个库存引用要容易得多。

它确实有效，如果你只是做了“必要的”。检查你的组合框并只在项目中使用jquery验证，这就足够了。希望它至少可以为将来节省一些时间提供一些见解。

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

2 个答案: