Data Annotations not working jquery unobtrusive validation in Partial ASP.NET MVC

Question

So I am trying to use the following DataAnnotations:

    [Required(ErrorMessage = "A Description Is Required.")]
    [StringLength(500, ErrorMessage = "The Description must be at least {2} characters long.", MinimumLength = 2)]
    public string description { get; set; }

The DataAnnotations populate data attributes in my <input /> element response to client for my description property:

<input maxlength="500" class="form-control" data-val="true" data-val-length="The Description must be at least 2 characters long." data-val-length-max="500" data-val-length-min="2" data-val-required="A Description Is Required." id="Add_description" name="Add.description" required="required" type="text" value="">

I am referencing script/js libraries:

jQuery Validation Plugin 1.13.1
Microsoft jQuery Unobtrusive Validation 3.2.2
Microsoft jQuery Unobtrusive Ajax 3.2.2

I am not sure if I need the Microsoft jQuery Unobstrusive Ajax library but I read this answer as I am also attempting a Range validation which is not working but I am focusing on the Required message for my description property for this question, to keep it simple.

Here is my View code (please understand my Bootstrap modal is HTML syntactically correct I have just excluded some of my HTML elements for the Bootstrap modal to make the code easier to read for my question):

    @using (Html.BeginForm("CustomFieldAddNew", "CustomField", null, FormMethod.Post, new { @role = "form", id = "CustomFieldAddForm", enctype = "multipart/form-data" }))
        {
            @Html.HiddenFor(mi => mi.Add.custom_field_context_id)

            <div class="modal-body">

                <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th colspan="2">General Information </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <label for="">Description<i class="icon-asterisk"></i></label>
                                </td>
                                <td>
                                    <div class="col-md-8 padding-0">
                                        @Html.TextBoxFor(mi => mi.Add.description, new { @class = "form-control", @MaxLength = "500", required = "required" })
                                        @Html.ValidationMessageFor(mi => mi.Add.description)
                                    </div>
                                </td>
                            </tr>
                          </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- /.modal-body -->
            <div class="modal-footer">
                <button id="btnCloseSaveModal" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="btnCustomFieldSave" type="button" class="btn btn-primary">Save</button>
            </div>
        }

<script>
        $('#btnCustomFieldSave').on('click', function () {
        var $form = $(this).parents('form');

        var postData = {
            description: $('#@Html.IdFor(mi => mi.Add.description)').val()
        }

        if ($form.validate().form()) {//fire jQuery validation
            $.ajax({
                type: "POST",
                url: $form.attr('action'),
                contentType:"application/json",
                data: JSON.stringify(postData),
                error: function (xhr, status, error) {
                    toastr.error("Error saving, please try again.");
                },
                success: function (data) {
                    $('#customField').modal('toggle');
                    $form.trigger("reset");
                }
            });
        }

        return false;
    });
});
</script>

My client side validation message should say:

"A Description Is Required."

But instead, when I click btnCustomFieldSave, and my jQuery CLICK listener function fires and calls $form.validate() the validation error message reads "This field is required." This is the default message in the jQuery Validation Plugin 1.13.1 library.

My question is, why is my DataAnnotation message "A Description Is Required" not displaying in place of the canned jQuery Validation Plugin message "This field is required"

Note, whether I include the line @Html.ValidationMessageFor(mi => mi.Add.description) or not. I am still seeing "This field is required" instead of my custom message defined in the DataAnnotation attribute Required which is "A Description is Required"

score 4 · Accepted Answer · edited May 23 '17 at 12:16

So the Microsoft jQuery Unobtrusive Validation has already fired its parse and binded to data attrs before my Partial form content was loaded.

I needed to have Microsoft jQuery Unobtrusive Validation parse fire again, so at the bottom of my Partial I added:

$(function () {
        //Microsoft Unobtrusive jQuery validation has already binded so must kick off parse to bind partial loaded dynamic form
        $.validator.unobtrusive.parse($('#CustomFieldAddForm'));
});

I found the answer here: Data Annotations / Validation not working for partial views

Data Annotations not working jquery unobtrusive validation in Partial ASP.NET MVC

1 Answers1