jQuery 验证不适用于 jQuery UI 对话框

Question

我在使用带有 jquery ui 对话框的 jquery 验证插件 (http://jqueryvalidation.org) 时遇到问题。 我在这里读过：jQuery UI Dialog validation without using <form> tags 但建议的那些仍然不起作用。

下面是我的 jQuery：

$( '#addModal' ).dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        'Create': function() {
            $( '#addForm' ).validate({
                rules: {
                    titleAdd: { required: true },
                    descriptionAdd: { required: true }
                },

                submitHandler: function( form ) {
                    $( this ).dialog( 'close' );

                    // ... AJAX call 

                } //end submitHandler
            }); //end validate()
        },
        Cancel: function() {
            $( this ).dialog( 'close' );
        }
    } //end buttons
}); //end Create Form Modal

以下是 HTML：

<div id="addModal" title="Add new Appointment">
<form name="addForm" id="addForm" action="" method="POST" accept-charset="utf-8">
    <div class="row">
        <div class="form-group col-md-12">
            <label for="title">Appointment Title</label>
            <input type="text" id="titleAdd" class="form-control" name="title" />
        </div>
    </div>
    <div class="row">
        <div class="form-group col-md-12">
            <label for="description">Description</label>
            <textarea id="descriptionAdd" name="description" cols="20" rows="4" class="form-control"></textarea>
        </div>
    </div>

    <div class="row">
        <div class="col-md-2">
            <input type="submit" name="save" value="Save" class="form-control btn btn-default btn-primary" tabindex="-1" style="position:absolute; top:-1000px">
        </div>
    </div>
    <input type="hidden" id="id" name="id" />
</form>

我什至尝试过建议的：https://stackoverflow.com/a/2142126

甚至这个： https://stackoverflow.com/a/7390327 也试过这个：https://stackoverflow.com/a/18721278 还是不行。

Answer 1

看来我解决了我自己的问题。

我将 validate() 移到对话框之外并更改了规则。 我之前用id 做规则，从不知道应该是input name

$('#addForm').validate({
    rules: {
        title: { required: true },
        description: { required: true }
    }
});

$( '#addModal' ).dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        'Create': function() {
            if ( $( '#addForm' ).valid()  ) {
                $( this ).dialog( 'close' );

                // ... AJAX call 

            } //end if

        },
            Cancel: function() {
                $( this ).dialog( 'close' );
            }
    } //end buttons
}); //end Create Form Modal