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

当我点击提交时，我可以看到元素上添加了class，但没有显示错误信息。提交前：

<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

你所有的选择都有价值，由于默认选择了第一个选项，因此表单似乎有效。

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

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

埃里克，我做了一个快速演示，我犯了完全低于顺序的错误；

首先，

确保将 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);

jQuery 验证不显示错误信息

jQuery Validate Not Displaying Error Message

jquery

jquery-plugins

asp.net-mvc-4