在MVC 3和JQuery手册表单验证

问题描述

我希望能够触发在客户端表单验证，当用户选择了GO按钮。目前，当选择了GO按钮，它不验证完整的形式。例如，如果我加载表格，并选择转到按钮没有焦点移到文本框中，没有什么是验证和val.Valid（）返回true。如果我在文本框中输入无效数据，验证该单项跑;当我选择GO按钮，val.Valid（）返回false。

I want to be able to trigger form validation on the client side when the user selects the "GO" button. Currently when the "GO" button is selected it does not validate the complete form. For example, If I load the form and select the "Go" button without giving focus to the text box, nothing is validated and val.Valid() returns true. If I do enter invalid data in a text box, validation is ran for that individual item; and when I select the "GO" button, val.Valid() return false.

所以，我想要做的，就是当用户选择一个按钮或其他事件，我想触发所有形式的检验。

So what I'm trying to do, is when a user select a button or other event, I want to trigger all the forms validation.

我在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以下

I think I found the solution to my problem. See showErrors Below

   <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

This following link to the post on JQuery forms did not pertain to my problem, but I was able to find the method names I was looking for.http://plugins.jquery.com/content/jqueryvalidate-showerrors-issue-form-wizard

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

If someone has a better answer, please provide feedback.

更新

在previous code有些工作在Firefox，但不是在所有在IE中。我做了以下，现在在Firefox但仍然无法在ID

The previous code somewhat works in Firefox, but not at all in IE. I did the following and it works now in Firefox but still not in 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());
//            })
    });

有关指着我正确的方向。但还不够完善。

Thanks for Using jQuery To Hijack ASP.NET MVC Form Posts for pointing me in the correct direction. But still not perfect

推荐答案

我不知道这是不是最好/最有效的方式，但我在我自己的函数分别验证每个元素做。

I don't know if this is the best/most efficient way, but I do it by validating each element individually in my own function.

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

这将是巨大的，让它自动地进行验证，但我似乎总是遇到一些奇怪的商业逻辑规则，没有得到的通用验证方法捕获。这样做可以让我控制所有的验证我想要的方式，而是依靠内置的验证的大部分时间。

It would be great to let it validate automagically, but I always seem to run into some weird business logic rule that doesn't get caught by the generic validation methods. Doing it this way lets me control all of the validation the way I want to, but relying on built in validation most of the time.

这篇关于在MVC 3和JQuery手册表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！