Validate and close dialog on enter key

Question

I have a jquery dialog with a form. It works fine when a user clicks on the submit button. It validates, enters a new record in the db, closes and refreshes the table in the parent window. Everything works the same when the enter key is pressed except the dialog does not close. I'm hoping someone can pont out my error. I'm also using the validation plugin and the Datatables plugin. Thanks

  <div id="add-dialog-container" title="Add New Manufacturer" style="display:none;">
  <div class="validateTips">All form fields are required.</div>
  <form id="add-dialogForm" class="dialogForms">
  <input type="hidden" id="crud" name="crud" value="c" />
  <fieldset>
  <label for="Manufacturer" class="requiredBold">*Manufacturer:</label>
  <input type="text" name="Manufacturer" id="Manufacturer" class="text ui-widget-content ui-corner-all" />
   <label for="Active" class="requiredBold">*Active:</label>
  <input name="Active" class="radio" type="radio" id="ActiveYes" value="1" checked="checked" /> 
  Yes&nbsp;&nbsp;
  <input name="Active" class="radio" type="radio" id="ActiveNo" value="0" /> No
  </fieldset>
  </form>
  </div> 

    $(function() {
    var $this = $("#add-dialogForm");
    var originalContent;
    $( "#add-dialog-container" ).dialog({
        autoOpen: false,
        height: 220,
        width: 300,
        modal: true,
        buttons: {
            "Save": function() {
                if($this.valid()) {
                    $this.submit();
                    $( this ).dialog( "close" );
                }
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        open : function(event, ui) { 
            originalContent = $this.html();
        },
        close: function() {
            $this.find(":input,:radio,:checkbox").removeClass( "ui-state-error" );
            $this.html(originalContent);
        }
    });

    // *** validate and post add new record *** //
    $("#add-dialogForm").validate({
        rules: {
            Manufacturer: {required: true, minlength: 1, maxlength: 100},
            Active: {required: true},
            },
        messages: {
            Manufacturer: "*Manufacturer is required",
            Active: "*Active is required",
            },
        submitHandler: function(form) {
            var dataToSend = $(form).serialize();
            jQuery(form).ajaxSubmit({
                type: "post",
                url: crudURL,
                data: dataToSend,
                success: function(){ 
                    oTable.fnReloadAjax();
                }
            })
        }
    }); // *** end validate add *** //

    $( "#add-new" ).click(function() {
            $("#add-dialog-container").dialog( "open" );
            $("#add-dialog-container").removeAttr("display");
            $("#Manufacturer").focus();
    });
});

Answer 1

When you hit Enter in the form, it submits the form. So your submitHandler for $.validate is triggered. What you can do is rearrange your calls so that you close the dialog after a successful submit. In your "Save" button handler just do this:

$this.submit();

You don't need to manually check if the form is valid with $this.valid(), because submitting the form will trigger that automatically.

Then, in your submitHandler function, at the end, add:

$( "#add-dialog-container" ).dialog('close');

That will cover both the "hit enter" case and the "clicked Save" case.

Answer 2

Add $(this).remove() inside your close function

close: function() {
    $this.find(":input,:radio,:checkbox").removeClass( "ui-state-error" );
    $this.html(originalContent);
    $(this).remove();
}