ASP.net 将 dataannotations 验证与 jquery 验证混合时,MVC 验证失败

ASP.net MVC Validation fails when mixing dataannotations validation with jquery validation

提问人:Dismissile 提问时间:5/27/2011 更新时间:5/27/2011 访问量:1412

问:

我有一个非常简单的示例,尝试在 MVC3 中将数据注释与不显眼的 javascript 一起使用:

型:

public class RegisterModel {
    [Required]
    public string EmailAddress { get; set; }

    [Required]
    public string FirstName { get; set; }
}

控制器:

public class HomeController : Controller {
    public ActionResult Index() {
        return View(new RegisterModel());
    }

    [HttpPost]
    public ActionResult Index(RegisterModel model) {
        return View(model);
    }
}

视图:

@model RegisterModel

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using( Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "mainForm" } ) ) {
    @Html.EditorFor( m => m.FirstName)<br/>
    @Html.ValidationMessageFor( m => m.FirstName)<br/>

    @Html.EditorFor(m => m.EmailAddress)<br/>
    @Html.ValidationMessageFor(m => m.EmailAddress)<br/>

    <input type="submit" value="Submit" />
}

一切正常。当我在表单为空时点击提交按钮时,它会阻止我提交。它输出不显眼的 javascript 并执行客户端验证。我想做一些远程验证,以确保电子邮件地址未被使用,因此我在视图中添加了以下内容:

<script type="text/javascript">
    $("#mainForm").validate({
        rules: {
            EmailAddress: {
                email: true,
                remote: {
                    url: "@Url.Action("CheckForValidEmail")",
                    type: "post"
                }
            }
        },
        messages: {                
            EmailAddress: { 
                email: "You must provide a valid e-mail address.",
                remote: jQuery.format("The email {0} is already in use.")
            }
        }
    });
</script>

一旦我添加它,我的验证就会停止工作。我认为这是因为我将数据注释验证与jquery验证混合在一起。

如果我从模型中删除 [Required] 属性并将其添加到我的脚本中,那么一切正常:

FirstName: { required: true },
EmailAddress: { required: true, email: true, remote ... }

一切正常。

我是否必须放弃不显眼的 javascript 验证才能使用此远程验证?有没有办法使用不显眼的 javascript 进行远程验证?

asp.net-mvc-3 jquery-validate unobtrusive-javascript

评论


答:

2赞 Darin Dimitrov 5/27/2011 #1

是的,问题来自于您将另一个验证处理程序附加到表单中,该处理程序与jquery非侵入式验证附加的处理程序冲突。

为此,您可以使用 Remote 属性:

public class RegisterModel {
    [Required]
    [Remote("CheckForValidEmail", "Home")]
    public string EmailAddress { get; set; }

    [Required]
    public string FirstName { get; set; }
}

以及以下行动:CheckForValidEmailHomeController

public ActionResult CheckForValidEmail(string emailAddress)
{
    if (repository.IsValid(emailAddress))
    {
        // If you return a JSON string the model will be considered
        // invalid and this string will be used as error message
        return Json(
            string.Format(
                "The email {0} is already in use.", 
                emailAddress
            ), 
            JsonRequestBehavior.AllowGet
        );
    }
    // Return true to indicate that the email address is valid
    return Json(true, JsonRequestBehavior.AllowGet);
}

现在你不再需要编写任何javascript。

评论

0赞 Dismissile 5/27/2011
太棒了,谢谢。有没有办法控制它回发到控制器的频率?目前,它似乎在我键入时执行此操作,并且我不希望每次键入字符时都进行远程调用。我宁愿让它以较慢的速度或在他们关闭文本框后进行。