Manual form validation in MVC 3 and JQuery

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.

I'm doing this in 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" />
}

Update

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>

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.

Update

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

回答1:

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.

回答2:

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

回答3:

Not sure if you figured this out yet, but I ran into the same thing in IE with $("#myForm").submit. Use live:

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


    e.preventDefault();
});

回答4:

Its not working in IE because you are missing a semi-colon: