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.

Why are you not using jquery.validate.unobtrusive.js so all this is handles out of the box (your scripts are unnecessary)? — user3559349
– user3559349, Commented Feb 26, 2016 at 22:13
It's actually showing the data-fule-required and data-msg-required attributes, but it's not showing the error message. — Eric
– Eric, Commented Feb 29, 2016 at 16:06
data-rule-required and data-msg-required have nothing at all to do with unobtrusive client side validation - they are just some arbitrary html attributes you have manually added yourself. Add the [Required] attribute to your WorkOrderId and ActivityId properties and include jquery.validatate.unobrusive.js in your view and it will all work fine with out your scripts (and remove those attributes) — user3559349
– user3559349, Commented Feb 29, 2016 at 20:41

irfan · Accepted Answer · 2016-03-08 21:11:09Z

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

edited Mar 8, 2016 at 21:11

answered Feb 26, 2016 at 21:37

irfan

6184 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Eric Over a year ago

The very first option is empty.

irfan Over a year ago

why not just adding, new {required = "required"}

Eric Over a year ago

with/without the required attribute, the form is still not submitting. The border turns red when I press the submit button. My problem is the message "Please choose WO" and "Please choose activity" do not appear. How do I make the message appear?

irfan Over a year ago

Can you check if you have Jquery validation configuration in your code, for ex: jqueryvalidation.org/validate/#errorplacement

irfan Over a year ago

@Html.ValidationSummary(false) I have updated my answer.

Collectives™ on Stack Overflow

jQuery Validate Not Displaying Error Message

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related