按 Enter 键验证并关闭对话框

Question

我有一个带有表单的 jquery 对话框。当用户单击提交按钮时它工作正常。它进行验证，在数据库中输入新记录，关闭并刷新父窗口中的表。按下回车键时，一切都一样，只是对话框不会关闭。我希望有人能指出我的错误。我还使用验证插件和数据表插件。谢谢

  <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

当您在表单中按 Enter 时，它会提交表单。因此 $.validate 的 submitHandler 被触发。您可以做的是重新安排您的调用，以便在成功提交后关闭对话框。在“保存”按钮处理程序中，只需执行以下操作：

$this.submit();

您不需要使用 $this.valid() 手动检查表单是否有效，因为提交表单会自动触发该操作。

然后，在您的submitHandler函数的最后，添加：

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

这将涵盖“点击回车”情况和“单击保存”情况。

Answer 2

在关闭函数中添加 $(this).remove()

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