How to set up unobtrusive MVC 5 validation when adding a form from an AJAX call?

Question

I have googeld about this issue, and I checked my web.config, bundleconfig and my layout, which look like this: web.config:

<appSettings> <add key="webpages:Version" value="3.0.0.0" /> <add key="webpages:Enabled" value="false" /> <add key="ClientValidationEnabled" value="true" /> <add key="UnobtrusiveJavaScriptEnabled" value="true" /> </appSettings> 

In the App_Start folder under "BundleConfig.cs":

  var jqueryBundle = new ScriptBundle("~/bundles/jquery"); jqueryBundle.Include("~/Scripts/jquery-{version}.js"); jqueryBundle.Include("~/Scripts/moment.min.js"); jqueryBundle.Include("~/Scripts/loadingoverlay.js"); jqueryBundle.Include("~/Scripts/fullcalendar.js"); jqueryBundle.Include("~/Scripts/lang-all.js"); jqueryBundle.Transforms.Add(jsTransformer); jqueryBundle.Orderer = nullOrderer; bundles.Add(jqueryBundle); 

var jqueryvalBundle = new ScriptBundle ("~ / bundles / jqueryval"); jqueryvalBundle.Include ("~ / Scripts / jquery.validate *"); jqueryvalBundle.Include ("~ / Scripts / jquery.validate.js"); jqueryvalBundle.Include ("~ / Scripts / jquery.validate.unobtrusive.js"); jqueryvalBundle.Transforms.Add (jsTransformer); jqueryvalBundle.Orderer = nullOrderer; bundles.Add (jqueryvalBundle);

on my layout page:

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

Firebug shows:

So far, everything is on, and shouold will work smoothly.

My model:

  [DisplayName("Förnamn")] [Required(ErrorMessage = "Vänligen ange ett förnamn")] [StringLength(100)] public string FirstName { get; set; } [DisplayName("Efternamn")] [Required(ErrorMessage = "Vänligen ange ett efternamn")] [StringLength(100)] public string LastName { get; set; } [DisplayName("E-post")] [Required(ErrorMessage = "Vänligen ange epost")] [StringLength(100)] [EmailAddress(ErrorMessage = "Ange en korrekt e-postaddress")] public string Email { get; set; } [DisplayName("Mobil")] [DataType(DataType.PhoneNumber)] public string PhoenNumber { get; set; } [DataType(DataType.Password)] [DisplayName("Lösenord")] public string PassWord { get; set; } 

My opinion:

 <div class="col-md-4 col-xs-12"> @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "credentialsForm" })) { @Html.AntiForgeryToken() <div class="form-horizontal"> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="form-group createCustomerFormGroup"> @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-3" }) <div class="col-md-9"> @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control", @name = "FirstName" } }) @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" }) </div> </div> <div class="form-group createCustomerFormGroup"> @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-3" }) <div class="col-md-9"> @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" }) </div> </div> <div class="form-group createCustomerFormGroup"> @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-3" }) <div class="col-md-9"> @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" }) </div> </div> <div class="form-group createCustomerFormGroup"> @Html.LabelFor(model => model.PassWord, htmlAttributes: new { @class = "control-label col-md-3" }) <div class="col-md-9"> @Html.EditorFor(model => model.PassWord, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.PassWord, "", new { @class = "text-danger" }) </div> </div> <div class="form-group createCustomerFormGroup"> @Html.LabelFor(model => model.PhoenNumber, htmlAttributes: new { @class = "control-label col-md-3" }) <div class="col-md-9"> @Html.EditorFor(model => model.PhoenNumber, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.PhoenNumber, "", new { @class = "text-danger" }) </div> </div> </div> } </div> 

field in form via firebug:

I run this script in firebug and I get no errors, although there should be errors, as some of the fields are required, but they do not matter:

 $("#credentialsForm").validate().numberOfInvalids() // retunrs 0 $("#credentialsForm").validate().valid() // returns true 

I was at this for hours, and now I'm going crazy, what am I missing?

EDIT: Changed the question from "How to properly set up an unobtrusive MVC 5 check" to the current name, as it described what I was looking for better than the previous one.

Answer 1

After a while I realized this.

I added this form from an AJAX call that returned a partial view.

I found the answer here

when adding dynamic data like this, you first need to remove the "validator" and "unobtrusiveValidation" forms, and then call the $ .validator.unobtrusive.parse function on the form, for example:

 var form = $("#main_div").closest("form"); form.removeData('validator'); form.removeData('unobtrusiveValidation'); $.validator.unobtrusive.parse(form); 

A more detailed explanation can be found here.