MVC 3和JQuery中的手动表单验证

我希望当用户选择“GO”按钮时，能够在客户端触发表单验证。当前，当选择“GO”按钮时，它不会验证完整的表单。例如，如果我加载表单并选择“Go”按钮而不将焦点放在文本框中，则不会验证任何内容，val.Valid（）将返回true。如果我在文本框中输入了无效数据，则会对单个项目运行验证；当我选择“GO”按钮时，val.Valid（）返回false

所以我想做的是，当用户选择一个按钮或其他事件时，我想触发所有表单验证

我在MVC3中这样做

public class TestValidationModel
{
    [Required(ErrorMessage="UserName Is Required")]
    [RegularExpression(@"(\S)+", ErrorMessage = "White space is not allowed")] 
    [StringLength(12, MinimumLength = 3)] 
    public string UserName { get; set; }

    [Required(ErrorMessage="Password Is Required")]
    [StringLength(20, MinimumLength = 3)] 
    public string Password { get; set; }

    [Required(ErrorMessage="Email Address Is Required")]
    [Display(Name = "Email Address")]
    public string EmailAddress{ get; set; }

}

<script src="/BasicMvc3Example2/Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script src="/BasicMvc3Example2/Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="/BasicMvc3Example2/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/BasicMvc3Example2/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $("#butValidateForm").click(function(){

            var val = $('#myForm').validate()
            alert(val.valid());
        })
    });
</script>

@using (Html.BeginForm("", "", FormMethod.Post, new {id = "myForm"}))
{
    <div>
       @Html.LabelFor(m => m.UserName)
       @Html.TextBoxFor(m => m.UserName)
       @Html.ValidationMessageFor(m => m.UserName)
    </div>

    <div>
       @Html.LabelFor(m => m.Password)
       @Html.TextBoxFor(m => m.Password)
       @Html.ValidationMessageFor(m => m.Password)
    </div>

    <div>
       @Html.LabelFor(m => m.EmailAddress)
       @Html.TextBoxFor(m => m.EmailAddress)
       @Html.ValidationMessageFor(m => m.EmailAddress)
    </div>

    <button id="butValidateForm">GO</button>
    <input type="submit" id="submitForm" value="Submit" />
}

公共类TestValidationModel
{
[必需（ErrorMessage=“用户名是必需的”）]
[正则表达式（@“（\S）+”，ErrorMessage=“不允许空白”）]
[StringLength（12，最小长度=3）]
公共字符串用户名{get；set；}
[必需（ErrorMessage=“需要密码”）]
[StringLength（20，最小长度=3）]
公共字符串密码{get；set；}
[必需（ErrorMessage=“需要电子邮件地址”）]
[显示（Name=“电子邮件地址”）]
公共字符串电子邮件地址{get；set；}
}
$（函数（）{
$（“#butValidateForm”）。单击（函数（）{
var val=$（'#myForm'）.validate（）
警报（val.valid（））；
})
});
@使用（Html.BeginForm（“，”，FormMethod.Post，new{id=“myForm”}））
{
@LabelFor（m=>m.UserName）
@Html.TextBoxFor（m=>m.UserName）
@Html.ValidationMessageFor（m=>m.UserName）
@LabelFor（m=>m.Password）
@Html.TextBoxFor（m=>m.Password）
@Html.ValidationMessageFor（m=>m.Password）
@LabelFor（m=>m.EmailAddress）
@Html.TextBoxFor（m=>m.EmailAddress）
@Html.ValidationMessageFor（m=>m.EmailAddress）
去
}

---

更新

我想我找到了解决问题的办法。见下文

   <script type="text/javascript">
        $(function () {
            $("#butValidateForm").click(function () {

                var val = $('#myForm').validate();
                val.showErrors();  //<-- Call showErrors
                alert(val.valid());
            })
        });
    </script>

$（函数（）{
$（“#但验证窗体”）。单击（函数（）{
var val=$（'#myForm'）.validate（）；
val.batherrors（）；//它在IE中不起作用，因为缺少分号：

var val = $('#myForm').validate()

我不知道这是否是最好/最有效的方法，但我通过在自己的函数中分别验证每个元素来实现

jQuery(document).ready(function () {

    $("#butValidateForm").button().click(function () { return IsMyFormValid(); });
    $('#myForm').validate();

}

function IsMyFormValid() {

    var isValid = false;

    isValid = $('#myForm').validate().element($('#UserName '));
    isValid = ($('#myForm').validate().element($('#Password '))) ? isValid : false;
    isValid = ($('#myForm').validate().element($('#EmailAddress'))) ? isValid : false;

    return isValid;
}

让它自动验证会很好，但我似乎总是遇到一些奇怪的业务逻辑规则，这些规则不会被通用的验证方法所捕获。这样做可以让我以我想要的方式控制所有的验证，但大部分时间都依赖于内置的验证。
不确定你是否已经弄明白了这一点，b但是我在IE中遇到了同样的事情，使用
$（“#myForm”）。提交
。使用
实时
：

$("#myForm").live('submit', function (e) {
    var val = $('#myForm').validate(); //<--added the semi-colon
    val.showErrors();
    alert(val.valid());


    e.preventDefault();
});

$（“#myForm”）.live（'submit'，函数（e）{
var val=$（“#myForm”）.validate（）；//

$（函数（）{
$（“#但验证窗体”）。单击（函数（事件）{
var isValid=$（'#myForm'）.valid（）；
如果（有效）
{
//在提交表格之前做些什么
$（'#myForm'）。提交（）；
}否则{
警报（“验证失败”）；
}
event.preventDefault（）；
})
});
谢谢你的建议。我添加了分号，但在IE中仍然不起作用。问得好。我附加到表单submit的事件从未被调用。警报从未显示。这是使用.each（）方法>>>$（'#myForm'）.validate（）.elements（）.each（函数（）{$（“#myForm”）.validate（）.element（this）；}）；在这种情况下，我认为.each方法是实现IsMyFormValid（）的更糟糕的方法。IsMyFormValid（）方法的存在是为了显式定义验证哪些元素。验证每个元素的最佳解决方案是完全删除IsMyFormValid（）和以下调用：(“#butValidateForm”）.button（）。单击（函数（）{return IsMyFormValid（）；}）；因为这是验证插件默认执行的操作。aahaa！我以为您想验证每个字段。
$("#myForm").live('submit', function (e) {
    var val = $('#myForm').validate(); //<--added the semi-colon
    val.showErrors();
    alert(val.valid());


    e.preventDefault();
});

<script type="text/javascript">
    $(function () {
        $("#butValidateForm").click(function (event) {

            var isValid = $('#myForm').valid();
            if(isValid)
            {
               //do something before submit the form
               $('#myForm').submit();
            }else{
               alert('validation failed'); 
            }
            event.preventDefault();
        })
    });
</script>