如何使用jQuery验证使用DataAnnotations属性？

Question

我想验证MVC 4与jQuery的形式，但我想获得数据注释 属性做它。

我的模型：

[Required(AllowEmptyStrings = false,ErrorMessage = "Username is required")] 
    [Display(ResourceType = typeof(EntitiesResources), Name = "Username")] 
    string Username { get; set; } 

    [Display(ResourceType = typeof(EntitiesResources), Name = "Password")] 
    [Required(AllowEmptyStrings = false)] 
    string Password { get; set; } 

    [Display(ResourceType = typeof(EntitiesResources), Name = "Email")] 
    [DataType(DataType.EmailAddress)] 
    string Email { get; set; } 

我的MVC观点：

<div class="row form-group"> 
<div class="col-xs-2 col-sd-2 col-md-2 col-lg-2">@Html.LabelFor(m => m.FirstName)</div> 
<div class="col-xs-4 col-sd-4 col-md-4 col-lg-4">@Html.TextBoxFor(m => m.FirstName, new { required = "required" })</div> 


<div class="col-xs-2 col-sd-2 col-md-2 col-lg-2">@Html.LabelFor(m => m.Email)</div> 
<div class="col-xs-4 col-sd-4 col-md-4 col-lg-4">@Html.TextBoxFor(m => m.Email, new { required = "required" })</div> 

我的问题是，如果我不把那个 '需要' 在MVC视图属性，它不不工作（$（“＃UserForm”）。valid（）总是返回true）。我也想使用电子邮件验证。

我打电话jQuery验证的Ajax调用：

$("#UserForm").validate(); 
if ($("#UserForm").valid()) { 
    var model = { 
     Id: $("#Id").val(), 
     FirstName: $("#FirstName").val(), 
     Email: $("#Email").val(), 
     LastName: $("#LastName").val(), 
     Enabled: $("#Enabled").val(), 
     Username: $("#Username").val(), 
     Password: $("#Password").val(), 
    } 
    $.ajax({ 
     url: "SaveUser/Users", 
     type: "Post", 
     contentType: 'application/json', 
     dataType: "json", 
     data: JSON.stringify(model), 
     success: function (data) { 
      alert(data.Message); 
      returnUsersGrid(); 
     }, 
     error: function (e) { 

     }, 
     complete: function() { 

     } 
    }); 
} 

反正是有使用数据的注释与剃刀帮手和jQuery验证或数据注解只适用于服务器端验证与ModelState.isvalid（）？

Answer 1

最后，我已经解决了这个问题。我在我的布局中引用了验证和不引人注目的js，我将它们移到了窗体视图并且工作正常。但是这种行为让我问下一个问题。为什么$（“＃UserForm”）.valid（）返回False并且不会触发javascript not宣布错误？

谢谢你们。

Answer 2

而不是使用jQuery ajax来保存数据，尝试@ Ajax.BeginForm，它不会在提交后重新加载整个页面，它的工作原理与jQuery ajax调用相同。

@using (Ajax.BeginForm("ActionMethodName", "ControllerName", new AjaxOptions{ HttpMethod = "POST"}, new { @enctype = "multipart/form-data" })) 
{ 
    <div class="row form-group"> 
    <div class="col-xs-2 col-sd-2 col-md-2 col-lg-2">@Html.LabelFor(m => m.FirstName)</div> 
    <div class="col-xs-4 col-sd-4 col-md-4 col-lg-4">@Html.TextBoxFor(m => m.FirstName) 
    @Html.ValidationMessageFor(model => model.FirstName) </div> 
    <div class="col-xs-2 col-sd-2 col-md-2 col-lg-2">@Html.LabelFor(m => m.Email)</div> 
    <div class="col-xs-4 col-sd-4 col-md-4 col-lg-4">@Html.TextBoxFor(m => m.Email) 
    @Html.ValidationMessageFor(model => model.Email) </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-12"> 
    <input type="submit" value="Save",class=" btn btn-primary"/> 
    </div> 
    </div> 
    }