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.

Answer 1

Something like this should do the trick:

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

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

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