How to use asp.net mvc 3 jquery validate with a jquery dialog that does an ajax submit?

Question

I am using

asp.net mvc 3 jquery validate unobstructive javascript.

I am trying to write all my validation on the serverside through annotations and then have the new feature of mvc 3 take care of the client side.

I have a dialog that has a button on it(just a button not a submit button) that I want to post data to the server through ajax.

So when the user clicks on the button I do a form submit and return false to cancel the post back.

I thought that would trigger the validation but that does not seem to be the case. How do I make the client side validation trigger?

Edit

<form method="post" id="TaskFrm" action="/Controller/Action">

            <input type="text" value="" name="Name" id="Name" data-val-required="Name field cannot be left blank" data-val-length-max="100" data-val-length="task cannot exceed 100 characters" data-val="true">
</form>

var $dialog = $('<div></div>').dialog(
            {
                width: 580,
                height: 410,
                resizable: false,
                modal: true,
                autoOpen: false,
                title: 'Basic Dialog',
                buttons:
                    {
                        Cancel: function ()
                        {
                            $(this).dialog('close');
                        },
                        'Create Task': function ()
                        {
                            var createSubmitFrmHandler = $(my.selectors.createFrm).live('submit', function ()
                            {
                                alert('hi');
                                return false;
                            });

                            createSubmitFrmHandler .validate();
                            var a = createSubmitFrmHandler .valid();

                            alert(a);

                        }
                    }
            });

This always return true.

Edit 2

if I put a submit button within the form it will show the clientside validation(I use jquery to return false as shown in my code).

So this means I do have the scripts and everything but it is not working for unknown reasons when I try to do it programmatic.

Edit 3

I stuck the jquery validate && jquery.validate.unobtrusive files in the master page. But when I stick them in the partial view that contains the fields that get loaded up and then force a submit the validation kicks in.

I don't understand. I pretty sure the pathing is right as I just dragged and dropped the file into my master page and it figured out the path. Having it in the partial views is not really a solution as I going have to do this multiple times and that means every time the partial view loads up I got another copy of these files.

Edit 4

I think it is just the jquery.validate.unobtrusive that needs to be for some reason loaded every time. I am not sure why though.

Solution 1

Something like this should do the trick:

    $("#my-button").click(function (event) {
        event.preventDefault();

        $("#my-form").validate();

        if ($("#my-form").valid()) {
            // ...
        }
    });

Solution 2

The issue may be due to elements being added to the DOM after the unobtrusive script loads initially. You can force it to attach validation handlers the new elements by calling $.validator.unobtrusive.parse("form") after creating the dialog.

$("<div></div>").dialog(...)
$.validator.unobtrusive.parse("form")

This solved our similar issue although we display the form within the dialog.

Solution 3

$("#my-button").click(function (event) {
    event.preventDefault();

    $.validator.unobtrusive.parse("#my-form");

    if ($("#my-form").valid()) {
        // ...
    }
});