Manual form validation in MVC 3 and jQuery

Question

I want to be able to initiate client-side form validation when the user selects the GO button. Currently, when the GO button is selected, it does not check the full form. For example, if I download a form and select the Go button, without focusing on the text field, nothing is checked, and val.Valid () returns true. If I enter incorrect data in a text box, validation is performed for this single element; and when I select the "GO" button, val.Valid () returns false.

So what I'm trying to do is when the user selects a button or other event, I want to start checking all forms.

I do it 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 a 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 next link to a post in jQuery forms did not address my problem, but I was able to find the names of the methods I was looking for. http://plugins.jquery.com/content/jqueryvalidate-showerrors-issue-form-wizard

If anyone has a better answer, please provide feedback.

---

Update

The previous code works somewhat in Firefox, but not at all in IE. I did the following and now it works 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 capture ASP.NET MVC Form messages to point me in the right direction. But still not perfect

Answer 1

I don't know if this is the best / most efficient way, but I do this by checking each element separately in its 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 if it were automatically checked, but I always come across some strange rule of business logic that does not fall under the general verification methods. Performing this method allows me to control all the checks the way I want, but most of the time I rely on the built-in check.

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

Answer 3

Not sure if you understood this, but I came across the same thing in IE using $("#myForm").submit . Use live :

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

Answer 4

Doesn't work in IE because you are missing a colon:

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