Jquery Combobox + 底层下拉验证 + jquery 验证答案

【问题标题】：Jquery Combobox + validation of underlying dropdown + jquery validationJquery Combobox + 底层下拉验证 + jquery 验证
【发布时间】：2014-06-26 18:08:34
【问题描述】：

我正在 asp.net mvc 中开发一个应用程序并尝试使用 jquery 验证插件进行验证。

我有一个下拉列表，这里使用 jQuery 代码将其转换为组合框：

http://jqueryui.com/autocomplete/#combobox

我遇到的问题是关于验证。如果用户提交表单时未从下拉列表中选择值，则会在回帖中显示错误消息。

我遇到的问题是，如果我从底层下拉列表中手动选择一个值，错误消息就会消失。但是，如果我使用组合框，那么即使底层下拉列表中的值发生变化，错误消息也不会消失。

组合框中更新值的代码是：

this._on( this.input, {
          autocompleteselect: function( event, ui ) {
            ui.item.option.selected = true;
            this._trigger( "select", event, {
              item: ui.item.option
            });
          },

jquery 中的验证是如何完成的？它不检查底层下拉列表的值是否发生变化？

谢谢！

---- HTML 标记和 jQuery。

对于 HTML。我正在使用 asp .net mvc 代码如下：

<div class="form-group">
  @Html.LabelFor(model => model.Property.Area, new { @class = "col-xs-12 col-sm-4 col-md-2" })
  <div class="input-group col-xs-12 col-sm-8 col-md-4">@Html.DropDownListFor(model => model.Property.Area, Model.AreaLookUps, "--Select Area--", new { onchange = "initializeMapAndGeocode();", @class = "form-control combobox" })</div> 
  <div id="property-area-error" class="col-sm-offset-4 col-md-offset-2"><span class="text-danger">@Html.ValidationMessageFor(model => model.Property.Area)</span></div>
</div>

这会生成以下标记

<div class="form-group">
  <label class="col-xs-12 col-sm-4 col-md-2" for="Property_Area">Area*</label>
  <div class="input-group col-xs-12 col-sm-8 col-md-4">
    <select class="form-control combobox" data-error-div-id="property-area-error" data-val="true" data-val-number="The field Area* must be a number." data-val-required="Please select the appropiate option." id="Property_Area" name="Property.Area" onchange="initializeMapAndGeocode();">
    <option value="">--Select Area--</option>

我没有任何验证方法。我只是简单地包含了 jQuery validate 和 jQuery.Unobtrusive.Validation 库。

谢谢。

-- 更新我通过添加给错误 div 一个“id”并将 id 作为数据属性添加到“select”来创建一个解决方法。在组合框脚本中，当组合框值更改时，我会隐藏此错误 div。虽然这可能不是最好的解决方案 - 但它是一种解决方法。

【问题讨论】：

请出示您的.validate() 方法以及相关的HTML 标记。

标签： jquery asp.net-mvc combobox jquery-validate

【解决方案1】：

引用 OP：

“jquery 中的验证是如何完成的？它不检查底层下拉列表的值是否发生变化吗？”

它只检查指定的 input、textarea 和 select 元素（在 form 容器内）。如果您正在执行将数据从 GUI 元素移动到隐藏的 input、textarea 或 select 元素的操作，则由您手动在正确的元素上声明规则。您可能还需要使用 .valid() 方法手动触发元素验证。

这里做了一些非常相似的事情：https://stackoverflow.com/a/23976174/594235

【讨论】：