jQuery验证不显示错误信息

Question

我有一个需要验证的表单。我使用jQuery验证。我有问题显示错误消息。这是我的javascript代码：

$(function() { 
    $("#submission-form").validate({ 
     rules: { 
      WorkOrderId: "required", 
      ActivityId: "required" 
     }, 
     messages: { 
      WorkOrderId: "Please choose WO", 
      ActivityId: "Please choose activity" 
     } 
    }); 
}); 

下面是我的html：

@using (Html.BeginForm("Create", "Submissions", FormMethod.Post , new { id = "submission-form" })) { 
      @Html.AntiForgeryToken() 
      @Html.ValidationSummary(true) 

      <fieldset> 
       <legend>WorkOrderSubmission</legend> 

       <div class="editor-label"> 
        @Html.LabelFor(model => model.WorkOrderId, "WorkOrder") 
       </div> 
       <div class="editor-field"> 
        @Html.DropDownList("WorkOrderId", (SelectList)ViewBag.WorkOrders, "", new { @data_rule_required="true", @data_msg_required="The Workorder field is required." }) 
        @Html.ValidationMessageFor(model => model.WorkOrderId) 
       </div> 

       <div class="editor-label"> 
        @Html.LabelFor(model => model.ActivityId, "Activity") 
       </div> 
       <div class="editor-field"> 
        @Html.DropDownList("ActivityId", (SelectList)ViewBag.Activities, "", new { @data_rule_required="true", @data_msg_required="The Activity field is required." }) 
        @Html.ValidationMessageFor(model => model.ActivityId) 
       </div> 
       <p> 
        <input type="submit" value="Create" /> 
       </p> 
      </fieldset> 
     } 

当我点击提交，我可以看到类加入元素，但不显示错误消息。 之前提交：

<select data-msg-required="The Workorder field is required." data-rule-required="true" id="WorkOrderId" name="WorkOrderId" aria-required="true"> 
    <option value=""></option> 
    <option value="1">WO000001 - 001</option> 
    <option value="2">WO000002 - 001</option> 
</select> 

提交后：

<select data-msg-required="The Workorder field is required." data-rule-required="true" id="WorkOrderId" name="WorkOrderId" aria-required="true" class="input-validation-error" aria-describedby="WorkOrderId-error" aria-invalid="true"> 
    <option value=""></option> 
    <option value="1">WO000001 - 001</option> 
    <option value="2">WO000002 - 001</option> 
</select> 

如何显示错误消息？

生成的HTML：

<div class="editor-field"> 
    <select data-msg-required="The Workorder field is required." data-rule-required="true" id="WorkOrderId" name="WorkOrderId"><option value=""></option> 
    <option value="1">WO000001 - 001</option> 
    <option value="2">WO000002 - 001</option> 
    </select> 
    <span class="field-validation-valid" data-valmsg-for="WorkOrderId" data-valmsg-replace="true"></span> 
</div> 

<div class="editor-label"> 
    <label for="ActivityId">Activity</label> 
</div> 
<div class="editor-field"> 
    <select data-msg-required="The Activity field is required." data-rule-required="true" id="ActivityId" name="ActivityId"> 
    <option value=""></option> 
    <option value="1">Activity 1</option> 
    <option value="22">Activity 22</option> 
    </select> 
    <span class="field-validation-valid" data-valmsg-for="ActivityId" data-valmsg-replace="true"></span> 
</div> 

我有标签data-msg-required="The Workorder field is required." data-rule-required="true"，但我无法看到错误消息。

Answer 1

所有的选项都有价值， ，因为第一个选项被选中默认，表格看起来有效。

如果您在顶部添加“选择...”选项并且值为“”，则表单提交时会显示错误消息。

<option value="">Choose...</option> 

---

埃里克，我做了一个快速演示，我所犯的错误正是为了以下;

首先，

确保您添加jQuery验证捆绑到_Layout.cshtml

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryval") 

然后

@Html.DropDownList("WorkOrderId", (SelectList)ViewBag.WorkOrders, "", new { @required = "required" }) 

添加所需的足够，验证方法为你添加其他属性。你为什么不使用`jquery.validate.unobtrusive.js`所以这一切都是

@section scripts{ 
    <script type="text/javascript"> 
     $(function() { 
      $("#submission-form").validate({ 
       rules: { 
        WorkOrderId: "required", 
        ActivityId: "required" 
       }, 
       messages: { 
        WorkOrderId: "Please choose WO", 
        ActivityId: "Please choose activity" 
       } 
      }); 
     }); 
    </script> 
} 

---

// excludePropertyErrors: 
    // true to have the summary display model-level errors only, or false to have 
    // the summary display all errors. 
    public static MvcHtmlString ValidationSummary(this HtmlHelper htmlHelper, bool excludePropertyErrors);