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);