使用非侵入式验证时表单未发布

Question

I've been trying to get this problem fixed for several hours now, but can't seem to find out what's wrong here.

I have a view with a few fields that I want to post to my controller. Now, I want to check for validation errors on the client side. I've used this in several projects before by adding: - jquery.js (version 1.12.1) - jquery.validate.js (version 1.14.0) - jquery.validate.unobtrusive.js (version 3.2.3) - jquery-unobtrusive-ajax.js (version 3.2.3)

As soon as a I reference jquery.validate.unobtrusive.js, the client sided validation works. But when I press the submit button, it just won't submit the form anymore. It just won't hit the controller.

My view is as following:

<div class="row">
<div class="col-md-12">
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <span class="caption-subject bold uppercase font-dark">Auto toevoegen</span>
            </div>
            <div class="actions">
                @Html.ActionLink("Terug", "Index", null, new { @class = "btn btn-circle green btn-outline btn-sm" })
            </div>
        </div>
        <div class="portlet-body">
            @using (Html.BeginForm("Create", "Car", FormMethod.Post, new { @class = "form-horizontal" }))
            {
                @Html.AntiForgeryToken()

                <div class="form-horizontal">

                    @Html.ValidationSummary(true)
                    @Html.HiddenFor(model => model.Id)

                    <div class="form-group">
                        @Html.LabelFor(model => model.Merk, new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Merk, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Merk)
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Type, new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Type, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Type)
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Kenteken, new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Kenteken, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Kenteken)
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Kilometervergoeding, new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Kilometervergoeding, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Kilometervergoeding)
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Name)
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.AccountNumber, new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.AccountNumber, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.AccountNumber)
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.DefaultCar, new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.DefaultCar)
                            @Html.ValidationMessageFor(model => model.DefaultCar)
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Opslaan" class="btn blue" />
                            @Html.ActionLink("Annuleren", "Index", null, new { @class = "btn btn-white" })
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

My controller action looks like this:

        [HttpPost]
    [DisableValidation]
    public ActionResult Create(CarViewModel model)
    {
        if(!ModelState.IsValid)
        {
            return View(model);
        }

        try
        {
            var tblCar = mapper.Map<CarViewModel, tblCar>(model);

            _carAppService.Insert(tblCar);
            return RedirectToAction("Index");
        }
        catch(Exception ex)
        {
            //Add proper error messages
            Logger.Debug("Error occured during car adding process: " + ex.InnerException);

            //add common container with errors
            TempData["Error"] = "Er is iets fout gegaan :(";
            return RedirectToAction("Index");
        }
    }

The scripts are loading in a bundle on startup and are loading in the order stated above. Now as soon as I remove the jquery.validate.unobtrusive from my bundle config, the submit button works. The client sided validation doesn't work anymore then though.

Does any know what's going on here? Thanks!

Answer 1

Alright I fixed the problem!

This answer will most likely only be useful is you make use of ASP.NET Boilerplate Zero template.

In ~/Common/Scripts a Javascript file was added (jquery-validation-custom.js).

The content messed with the submit button. I replaced it with my own version of a custom validation handler for modals and now it works!