jQuery validate dynamic form dialog

Question

I can't for the life of me get the form validation to work on a dynamically created form. Read lots of articles about adding specific rules to dynamically added fields and one about dynamic forms that suggests I'm doing what I should be? Leads me to think I'm missing something painfully obvious!

I have a partial view that looks like (cut it down to a single field):

<div class="modalcontent clearfix">
    @using (@Html.BeginForm(null, null, FormMethod.Post, new { @class = "form-horizontal", @id = "userForm" }))
    {
        @Html.ValidationSummary("", new { @class = "text-danger" })
        <div class="row">
            <div class="form-group">
                @Html.LabelFor(model => model.User.Email, new { @class = "control-label" })
                @Html.TextBoxFor(model => model.User.Email, new { @class = "form-control" })
            </div>
        </div>
    }
</div>

and relevant attributes on the Email field which result in the following Html

<div id="modalUserDetails" class="modalBox ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 0px; max-height: none; height: 490px;">
    <div class="modalcontent clearfix">
        <form action="/UserManagement/AddUser" class="form-horizontal" id="userForm" method="post">
            <div class="validation-summary-valid text-danger" data-valmsg-summary="true">
            <ul><li style="display:none"></li></ul>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="control-label" for="User_Email">Email Address</label>
                    <input class="form-control" data-val="true" data-val-email="The Email Address field is not a valid e-mail address." data-val-required="The Email Address field is required." id="User_Email" name="User.Email" type="text" value="">
                </div>
            </div>
        </form>
    </div>
</div>

In my main page I have

<div id="modalUserDetails" class="modalBox"></div>

Then I setup a click handler for a button which pops up the dialog and the dialog itself:

@section Scripts
{
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript" language="javascript">
        $(document).ready(function () {

            $("#btnAddUser").click(function () {
                $.ajax({
                    type: "post",
                    url: '/UserManagement/AddUser,
                    success: function (result) {
                        $('#modalUserDetails').html(result);
                        $("#userForm").validate()
                        $('#modalUserDetails').dialog("open");
                    }
                });
            });

            $("#modalUserDetails").dialog({
                autoOpen: false,
                height: 600,
                width: 800,
                modal: true,
                draggable: false,
                buttons: [
                    {
                        text: "Save",
                        click: function () {
                            if ($('#userForm').valid()) {
                                alert('form is valid');
                            } else {
                                alert('form is not valid');
                            }
                        }
                    },
                    {
                        text: "Cancel",
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
        });
    </script>
}

My understanding is that by calling validate() on the form after it's been created that should setup the rules by looking at the various atttributes of the input field and then the call to valid() should validate the form however it always says the form is valid.

I've tried all sorts like putting the validate() call in the click handler after it opens the dialog to no avail

Any advice or guidance appreciated.