Jquery post和unobtrusive ajaxvalidation不工作mvc 4

在jquery回发上，如果模型状态无效，我想使用jquery unobtrusivevalidation显示validation错误消息。 我创建了一个示例应用程序。 应用程序中的viewmodel如下所示

public class CityModel { public int Id { get; set; } [Display(Name = "City")] [Required(ErrorMessage = "City is required")] public string City { get; set; } } 

并且控制器具有以下操作方法

  public ActionResult City() { var cities = GetCities(); return View(cities); } [HttpPost] public ActionResult SaveCity(CityModel cityModel) { if (ModelState.IsValid) { //Save City return null; } else { return View(); } } public List GetCities() { var citiesList = new List { new CityModel() {Id = 1, City = "London"}, new CityModel() {Id = 2, City = "New York"} }; return citiesList; } 

这些观点有以下标记

 @model List 
Cities
 @Html.ValidationSummary(true) @using (@Html.BeginForm(null, null, FormMethod.Post, new { id = "frmSite", name = "frmSite" })) { @Html.EditorForModel()  }  function SaveCity() { $.ajax({ type: "POST", url: "/Home/SaveCity", contentType: "application/html; charset=utf-8", data: { Id: $('.cityId').val(), City: $('.cityName').val() }, success: function (data) { } }); }  

编辑器模板看起来像

 @model CityModel 
 
 
 @Html.TextBoxFor(x => x.Id, new {@class = "cityId"}) 
 
 
 
 @Html.TextBoxFor(x => x.City, null, new {@class = "cityName"}) @Html.ValidationMessageFor(x => x.City) 
 
  

我检查了 页面中包含 ，并且Web配置文件中存在

Answer 1

您通过ajax调用您的post，因此您需要手动调用$form.validate(); 并使用$form.valid()测试结果：

 function SaveCity() { $.validator.unobtrusive.parse($form); $form.validate(); if ($form.valid()) { $.ajax({ type: "POST", url: "/Home/SaveCity", contentType:"application/json; charset=utf-8", data: { Id: $('.cityId').val(), City: $('.cityName').val() }, success: function (data) { } }); } } 

如果它纯粹是客户端，则错误将包含在jqueryvalidation对象$form.validate().errorList但您必须进行类似于下面提到的一些手动处理。

如果要返回服务器端模型状态，可以将模型状态错误添加为控制器中的键值对，并将它们作为json返回。

您可以使用以下方法显示消息。

这将查找带有模型状态错误键的所有validation消息跨度，并将红色错误消息添加到它们。 请注意，您可能希望对此进行调整以显示针对某个键的许多错误消息。

 public doValidation(e) { if (e.data != null) { $.each(e.data, function (key, value) { $errorSpan = $("span[data-valmsg-for='" + key + "']"); $errorSpan.html("" + value + ""); $errorSpan.show(); }); } } 

更新

以上是上面的改编，因此您可以从jquery不显眼的错误中手动解析它：

  $.each($form.validate().errorList, function (key, value) { $errorSpan = $("span[data-valmsg-for='" + value.element.id + "']"); $errorSpan.html("" + value.message + ""); $errorSpan.show(); }); 

只要在其他声明中弹出它就可以了。 🙂