Question

I have setup a simple example to show a form inside a jquery UI dialog and wish to enable inline client side validation on that form

I have then added the scripts to my master page

<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 have enabled Client Side Validation through the following code

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

Then, I dont know how to enable inline validation for every input so when the user leaves the focus from any of them validation occurs.

The client side validation seems to work only after I have done a submit. But that is not a “client side validation” as the attributes get validated from my server code…

Any suggestion?

Answer 1

Finally I have got through the solution.

First of all, my forms were never binded to validation callbacks provided by the code inside the MicrosoftMvcJQueryValidation.js script. This because I am using jQuery dialogs and the form is inside the dialog while the script included in the master page.

My first attempt toward the solution has been to modify the MicrosoftMvcJQueryValidation.js. In particular I have added a function EnableClientSideValidation() where I moved the code that was in the $(document).ready function as in the following code sample

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 have called the same function inside a script block that I have placed in the dialog markup code $(document).ready() function

With the help of firebug I have placed a breakpoint inside the EnableClientSideValidation() function and then experienced the fact that was called only when the main page was ready but not from the dialog. This was due to the fact that I had my “dialog” script block inside the <form>...</form> tag and so the script did not worked.

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 everything started working! I would like to thanks vandalo and kdawg for helping in finding a solution. There was something still missed but your answers have stimulated my head.

I am posting this for other that can have the same problem.