javascript - 在对话框中使用 jQuery 验证重置表单

Question

我在 jQuery 对话框中的表单中使用 jQuery Validate。当用户关闭对话框时，我希望清除所有表单字段并重置显示错误反馈的字段。

它正确地将字段重置为空白，但错误反馈没有被正确清除。

这是我的对话代码。

// Attach dialog
$("#myDialog").dialog({
    autoOpen: false,
    modal: true,
    close: function(){
        $('#myDialog')[0].reset(); // This works in resetting the actual form values
        $("#myDialog").validate().resetForm(); // Not working :(
    }
});

Answer 1

是表格 idmyDialog吗？

如果是这样，我会将结构更改为：

<div id="myDialog>
   <form id="myForm">
   //inputs, etc...
   </form>
</div>

那么您的对话调用将如下所示：

$("#myDialog").dialog({
    autoOpen: false,
    modal: true,
    close: function(){
        //$('#myForm')[0].reset(); // This works in resetting the actual form values
        $("#myForm").validate().resetForm(); // Not working :(
    }
});

我认为你遇到了让 jQuery UI 作用于 #myDialog 以及它是你试图验证的表单的冲突。

另一种选择是在关闭时销毁对话框，并始终在打开时重新创建它。

Answer 2

如果它们仍未清除，则更改为接近 beforeClose 有效，因此在关闭对话框并在 DOM 上移动之前清除它们。