如何在Jquery验证中使用DataAnnotations属性?

时间:2017-06-12 08:49:32

标签: jquery asp.net-mvc data-annotations

我正在尝试使用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>

我的问题是如果我没有在MVC视图中放置'required'属性,它就不起作用($(“#UserForm”)。valid()总是返回true)。我也想使用电子邮件验证。

我在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 () {

        }
    });
}

是否有使用razor助手和jquery验证的数据注释,或者数据注释仅适用于使用ModelState.isvalid()的服务器端验证?

2 个答案:

答案 0 :(得分: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>
  }

答案 1 :(得分:0)

最后我解决了这个问题。我在我的布局中引用了验证和不引人注目的js,我将它们移动到窗体视图并且工作正常。但这种行为让我问下一个问题。 ¿为什么$(“#UserForm”)。valid()返回False并且没有触发javascript未声明错误?

谢谢你们。