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

Question

我在使用 jquery 验证插件 ( http://jqueryvalidation.org ) 和 jquery ui 对话框时遇到问题。 我在这里读过: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 作为规则，但从来不知道它应该是输入名称

$('#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