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>
        }

当我单击Submit时，我可以看到元素上的类添加，但是没有显示错误消息。 提交前：

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

Eric，我做了一个快速演示，我在命令之下犯了错误;

首先，

确保将jquery验证包添加到_Layout.cshtml

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

然后

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

添加required就足够了，validate方法为您添加了其他属性。

最后在脚本部分添加脚本代码：

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