Question

我有一个带表单的jquery对话框。当用户单击提交按钮时，它可以正常工作。它验证，在数据库中输入新记录，关闭并刷新父窗口中的表。按下回车键除了对话框未关闭外，其他所有操作都相同。我希望有人可以解决我的错误。我也在使用验证插件和Datatables插件。谢谢

  <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();
}

在输入键上验证并关闭对话框

2 个答案: