jQuery Validate Not Displaying Error Message

Question

I have a form that requires validation. I use jQuery validation. I have problem displaying the error message. This is my javascript code:

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

Below is my 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>
        }

When I click the Submit, I can see the class addition on the element, but no error message is displayed. Before 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>

After submit:

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

How do I display the error message?

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

I have the tags data-msg-required="The Workorder field is required." data-rule-required="true", but I can't see the error message.

Answer 1

All of your options have value, since the first option is selected default, form seems valid.

If you add "Choose..." option at top with value of "", error message shown at form submit.

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

---

Eric, I made a quick demo and I made mistakes exactly below order;

First,

make sure you add jquery validation bundle to the _Layout.cshtml

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

and then

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

adding required is enough, validate method adds other properties for you.

and lastly add your script code in script section:

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