Validating the built-in client side with MVC and jQuery

Question

I have a simple example to show a form inside the jquery user interface dialog and want to enable client side inline validation in this form

Then I added scripts to my homepage

<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/jquery-1.4.3.min.js" )%>"></script> <script type="text/javascript" src="<%: Url.Content( "~/_assets/js/jquery.validate.min.js" )%>"></script> <script type="text/javascript" src="<%: Url.Content( "~/_assets/js/MicrosoftMvcJQueryValidation.js" ) %>"></script> 

and then I turned on client side validation using the following code

 <% Html.EnableClientValidation(); %> <% using (Html.BeginForm() { %> <% } %> 

Then I don’t know how to enable the built-in check for each input , so when the user leaves the focus from any of them, a check occurs .

Client-side validation seems to work only after I submit. But this is not a "client-side check", since the attributes are checked from my server code ...

Any suggestion?

Answer 1

Finally, I got a solution.

First of all, my forms have never been associated with validation callbacks provided by the code inside the MicrosoftMvcJQueryValidation.js script. This is because I use jQuery dialogs and the form is inside the dialog and the script is on the main page.

My first attempt at a solution was to modify MicrosoftMvcJQueryValidation.js . In particular, I added the EnableClientSideValidation() function, where I moved the code that was in the $(document).ready function, as in the following code example

 function EnableClientSideValidation() { var allFormOptions = window.mvcClientValidationMetadata; if (allFormOptions) { while (allFormOptions.length > 0) { var thisFormOptions = allFormOptions.pop(); __MVC_EnableClientValidation(thisFormOptions); } } } $(document).ready(function () { EnableClientSideValidation(); }); 

Then I called the same function inside the script block that I put in the markup code of the $(document).ready() function dialog

With firebug, I placed a breakpoint inside the EnableClientSideValidation() function, and then experienced the fact that it was only called when the main page was ready, but not from the dialog. This was due to the fact that I had my own "dialog" script inside the <form>...</form> , so the script did not work.

Code like this

 <% using (Html.BeginForm()) { %> //DIALOG FORM CODE WAS HERE <script type="text/javascript"> $(document).ready(function () { EnableClientSideValidation(); }); </script> <% } %> 

has been changed to

 <% using (Html.BeginForm()) { %> //DIALOG FORM CODE WAS HERE <% } %> <script type="text/javascript"> $(document).ready(function () { EnableClientSideValidation(); }); </script> 

Finally it all started! I would like to thank vandalo and kdawg for their help in finding a solution. There was something else missing, but your answers stimulated my head.

I am posting this for another who may have the same problem.

Answer 2

So here is what I did to get MicrosoftMvcJQueryValidation to work for me in an AJAX / PartialView environment. This is important because essentially both instances (my AJAX / PartialView and your onBlur launch) require explicit control when invoking validation methods. I will try to do everything you need to do, because I had to edit the MicrosoftMvcJQueryValidation.js file so that it was included by AJAX. However, I do not believe that any of my corrections are necessary for what you want.

The key is to be able to access the validation functions generated by MicrosoftMvcJQuery. Fortunately, it adds it to the form element through a property called validationCallbacks .

In my custom submit function, I call these callbacks and call them ( form is a DOM element, not a jQuery object):

 // this taps into the mvc clientside validation functionality. // this is a roundabout way of calling jquery.validate() as // that is what going on the in callback() function validationCallbacks = form.validationCallbacks; if (validationCallbacks) { for (i = 0; i < validationCallbacks.length; i += 1) { callback = validationCallbacks[i]; if (!callback()) { // subsequent submit handlers should check for // this value before executing event.cancelBubble = true; return false; } } } 

Then I want my context view functions to check event.cancelBubble before continuing.

In your case, you can call this code in the blur event for every input in your form. Of course, this is not the most effective solution, since each function of the validationCallbacks array validates the entire form, but with each blur, it initiates validation. (validationCallbacks is an array for supporting multiple forms that require validation.)

Sorry, this is not very specific to your situation, but it should get what you need.

Answer 3

I have my earlier answer on how to manually invoke validation callbacks created by MicrosoftMvcJQueryValidation.js, however there may be a simpler answer. (I leave my first answer as a future reference for everyone.)

The jQuery Validation plugin options allow you to change which event triggers the validation. From http://docs.jquery.com/Plugins/Validation/validate#toptions we have the following parameter properties: onsubmit , onfocusout and onkeyup . You must appropriately assign these parameter values ​​and have the correct jQuery behavior as you want.

You may need to configure MicrosoftMvcJQueryValidation.js to allow settings to be configured when it invokes validation. I had to do this with my edited copy.

Answer 4

You can follow this example :

The problem with the script in MicrosoftMvcJQueryValidation.js that needs to be updated. Modify the MicrosoftMvcValidation.js script in step 3.

Model:

 Namespace Models Public Class Customer Private _Name As String = "" <DisplayName("Name")> _ <Required(ErrorMessage:="{0}: Mandatory field.")> _ <StringLength(10, ErrorMessage:="{0}: Max lenght 10.")> _ Public Property Name() As String Get Return _Name End Get Set(ByVal value As String) _Name = value End Set End Property Private _Surname As String = "" <DisplayName("Surname")> _ <Required(ErrorMessage:="{0}: Mandatory field.")> _ <StringLength(10, ErrorMessage:="{0}: Max lenght 10.")> _ Public Property Surname() As String Get Return _Surname End Get Set(ByVal value As String) _Surname = value End Set End Property End Class End Namespace <%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of MvcApplication1.Models.Customer)" %> <%@ Import Namespace="MvcApplication1.jQuery" %> ... <% Html.EnableClientValidation()%> <% Using (Html.BeginForm())%> <fieldset id="FormEditSet"> <div> <div> <%=Html.LabelFor(Function(m) m.Name)%> <%=Html.EditorFor(Function(m) m.Name)%> <%=Html.ValidationMessageFor(Function(m) m.Name, "*")%> </div> <div> <%=Html.LabelFor(Function(m) m.Surname)%> <%=Html.EditorFor(Function(m) m.Surname)%> <%=Html.ValidationMessageFor(Function(m) m.Surname, "*")%> </div> </div> </fieldset> <input type="image" src="<%=Url.Content("~/Content/Images/page_save_big.png")%>" value="Save" title="Save" style="border: none;" /> <%End Using%> 

Html.ValidationSummaryJQuery is a new extension method that you must define (follow the example). Remember to put the script at the bottom of the page:

 <script src="<%=Url.Content("~/Scripts/MicrosoftAjax/MicrosoftMvcJQueryValidation.min.js")%>" type="text/javascript"></script> 

Answer 5

You need to bind your input fields to the properties of your controller, and then use the Required attribute for your properties - see http://weblogs.asp.net/scottgu/archive/2010/01/15/asp-net-mvc-2- model-validation.aspx for an example.