如何将 DataAnnotations 属性与 jquery 验证一起使用？

Question

我正在尝试使用 jquery 验证 MVC 4 表单，但我想获取数据注释这样做的属性。

我的模特：

    [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>

我的问题是，如果我不把 'required' 属性放在 MVC 视图中，它就不起作用 ($("#UserForm").valid() returns 总是正确的).我也想使用电子邮件验证。

我在 Ajax 调用时调用 jquery 验证：

$("#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

不用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>
  }

Answer 2

终于解决了这个问题。我在我的布局中引用了验证和不显眼的 js，我将它们移动到表单视图并且工作正常。但是这种行为让我问下一个问题。 ¿为什么 $("#UserForm").valid() returns False 并且不会触发 javascript 未声明为错误？

谢谢大家。

如何将 DataAnnotations 属性与 jquery 验证一起使用？

How to use DataAnnotations attributes with jquery validation?

asp.net-mvc

jquery

data-annotations