MVC2 Client side validation within Jquery modal dialog

Using MVC2 I currently have a view creating a jquery dialog box containing an Edit partial view. On submit I am looking for it to perform client side validation on the Email class which has a required data annotation attribute for email address. Server side validation works fine but I want the user to have to fix the error in the modal dialog.

Below is the code

<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm())
<div>
 <label for="EmailAddress">
                    Email Address :
                </label>
 <%= Html.TextBoxFor(model => model.Email.EmailAddress)%>
 <%= Html.ValidationMessageFor(model => model.Email.EmailAddress)%>
</div>

Scripts I am loading up are

<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jquery-1.3.2.min.js")%>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jqueryUI/js/jquery-ui-1.7.2.custom.min.js")%>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/Splitter/splitter-1.5.js")%>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts开发者_StackOverflow/Scripts/Start.js")%>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/Scripts/extended/ExtendedControls.js")%>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jquery.validate.js")%>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/MicrosoftMvcJQueryValidation.js")%>"></script>

Looking at the html generated I am not getting any of the JSON data generated for the client side validation to work.

Any solutions gladly appreciated. S

I strongly recommend you to use jquery validation script.

jquery.validate.js has all the features for client-side validation within a jquery dialog.

First of all, add the jquery.validate.js to your Site.Master :

<script src="/Scripts/Using/jquery.validate.js" type="text/javascript"></script>

and then write your script something like that :

    <script type="text/javascript">
    var createLinkObj;
    $(function () {

        $('#mydialog').dialog({
            autoOpen: false,
            width: 500,
            modal: true,
            buttons: {
                "OK": function () {

                    $("#myForm").validate({
                        rules: {
                            Name: {
                                required: true
                            },
                            Email: {
                                required: true,
                                email: true
                            }
                        },
                        messages: {
                            Name: " * ",
                            Email: {
                                required: " * ",
                                email: " Invalid e-mail."                        
                        }
                });

                $("#myForm").submit();
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });

    $(".mylink").click(function () {
        //change the title of the dialog
        createLinkObj = $(this);
        var dialogDiv = $('#mydialog');
        var viewUrl = createLinkObj.attr('href');
        $.get(viewUrl, function (data) {
            dialogDiv.html(data);
            dialogDiv.dialog('open');
        });
        return false;
    });
});
</script>

As you can see when I click the mylink, mydialog appears and before submitting the myForm, I validated the myForm elements namely Name and Email.

Think that your form only contains Name and Email and then you can validate these elments by using jquery validate script.