jQuery Validation not working on jQuery UI Dialog

Question

I have been having problems with using the jquery validation plugin (http://jqueryvalidation.org) with jquery ui dialog. I have read in here: jQuery UI Dialog validation without using <form> tags but the suggested ones does not still work.

below is my 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

below is the 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>

I have even tried the suggested: https://stackoverflow.com/a/2142126

and even this: https://stackoverflow.com/a/7390327 also tried this: https://stackoverflow.com/a/18721278 still does not work.

Answer 1

It seems i solved my own issue.

I moved the validate() outside of the dialog and changed the rules. I was using id earlier for rules, never knew it should be the 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