Client side validation when using Ajax/jQuery to submit an ASP.NET MVC 3 form

Question

I am having trouble with client side validation when using Ajax and jQuery to handle a form sumission when using ASP.NET MVC 3.

Checking if the model is valid on the server side works, however the following snippet does not trigger the client side valiation.

Am I missing something?

@model ViewModels.LeadDetailModelCore
@{using (Html.BeginForm("UpdateCore", "Leads", new { area = "Telesales" }, FormMethod.Post, new { id = "coreSave" }))
  {

    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    @Html.HiddenFor(model => model.Lead_ID)

                    @Html.LabelFor(model => model.LeadStatus_ID)
                    @Html.DropDownListFor(model => model.LeadStatus_ID, new SelectList(Model.LeadStatuses, "LeadStatus_ID", "LeadStatus_Name"), "-- Please select a status --")
                    @Html.ValidationMessageFor(model => model.LeadSource_ID)

     }}
    <script type="text/javascript">
    // NOTE ADD

    $(function () {

        $('#coreSave').die().live("submit", function (e) {
            e.preventDefault();
            var form = $(this);

            var val = form.validate()
            if (val.valid()) {
                $("#ProgressDialog").dialog("open");

                // post via ajax
            }


            return false;
        });
    });

</script>

Community · Accepted Answer · 2017-05-23 11:43:44Z

6

Make sure that you have included the proper scripts:

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

and that you manually parse validation for all dynamic DOM elements. So everytime you update the DOM you should register client validation if this form was not part of the DOM when you initially loaded the page:

$.validator.unobtrusive.parse($('#coreSave'));

You might also find the following answer useful for using jQuery dialog with partial views.

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Oct 16, 2011 at 15:14

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

5 Comments

Nick Over a year ago

Many thanks for the reply. I have references to both of the jquery.validate scripts but I'm getting nothing when I call $.validator.unobtrusive.parse($('#coreSave'));, I'm getting Microsoft JScript runtime error: Unable to get value of the property 'parse': object is null or undefined

Darin Dimitrov Over a year ago

@Nick, have you enabled client validation in your web.config: <add key="ClientValidationEnabled" value="true"/>? Also if you are getting this error it means that you haven't referenced correctly the jquery.validate.unobtrusive.min.js script as it is there where this method is defined.

Nick Over a year ago

That's what I thought. The web.config value is in place and my script statements are <script src="@Url.Script("jquery-1.5.1.min.js")" type="text/javascript"></script> <script src="@Url.Script("jquery-ui-1.8.16.custom.min.js")" type="text/javascript"></script> <script src="@Url.Script("jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Script("jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

Darin Dimitrov Over a year ago

@Nick, what is Url.Script? There is no such method in the standard library. Look with FireBug that all scripts are properly served.

Nick Over a year ago

Thanks for the great help. The script was referenced twice by my asset manager and this was causing my problem.

Collectives™ on Stack Overflow

Client side validation when using Ajax/jQuery to submit an ASP.NET MVC 3 form

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related