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

Question

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

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

我在 MVC 3 中这样做

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" />
}

---

更新

我想我找到了解决问题的方法。请参阅下面的 showErrors

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

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

以下指向 JQuery 表单帖子的链接与我的问题无关，但我能够找到我正在寻找的方法名称。 http://plugins.jquery.com/content/jqueryvalidate-showerrors-issue-form-wizard

如果有人有更好的答案，请提供反馈。

---

更新

前面的代码在 Firefox 中有些工作，但在 IE 中根本不行。我做了以下操作，它现在可以在 Firefox 中使用，但仍然不能在 ID 中使用

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


            e.preventDefault();
        });
    });


//            $("#butValidateForm").click(function () {
//                var val = $('#myForm').validate()
//                val.showErrors();
//                alert(val.valid());
//            })
    });

感谢Using jQuery To Hijack ASP.NET MVC Form Posts 为我指明了正确的方向。但仍然不完美

Answer 1

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

Answer 2

不确定你是否知道这一点，但我在 IE 中使用$("#myForm").submit 遇到了同样的事情。使用live：

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


    e.preventDefault();
});

Answer 3

我不知道这是否是最好/最有效的方法，但我通过在我自己的函数中单独验证每个元素来做到这一点。

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;
}

让它自动验证会很棒，但我似乎总是遇到一些奇怪的业务逻辑规则，这些规则不会被通用验证方法捕获。这样做可以让我以我想要的方式控制所有验证，但大部分时间依赖于内置验证。

Answer 4

它在 IE 中不起作用，因为您缺少分号：

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