如何使用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> 
    }