jQuery Validation在提交时隐藏或拆除jquery Modal Dialog

Question

基本上当单击模态创建的提交按钮，并调用jQuery('#FormName').submit() 时，它会运行验证，然后调用submitHandler 中分配的方法。之后它要么创建一个新的模态 div 要么隐藏表单，我不明白为什么。

我已经对其进行了调试，并注意到在 submitHandler 中的方法调用之后，表单 .is(':hidden') = true 并且对于模态 div 也是如此。我很肯定我以前做过这件事，但这次似乎无法弄清楚我做错了什么。奇怪的是，这是一个模态 div 出现在屏幕上，但它完全没有内容。 （即使在表单之外放入随机文本。它就像是一个全新的模态 div）

设置方法如下：

function setUpdateTaskDiv() {
  jQuery("#UpdateTaskForm").validate({
    errorLabelContainer: "#ErrorDiv",
    wrapper: "div",
    rules: {
      TaskSubject: {
        required: true
      }
    },
    messages: {
      TaskSubject: {
        required: 'Subject is required.'
      }
    },
    onfocusout: false,
    onkeyup: false,
    submitHandler: function(label) {
      updateTaskSubject(null);
    }
  }
);

 jQuery('#UpdateDiv').dialog({
    autoOpen: false,
    bgiframe: true,
    height: 400,
    width: 500,
    modal: true,
    beforeclose: function() {
    },
    buttons: {
    Submit: function() {
      jQuery('#UpdateTaskForm').submit();
    },
    Cancel: function() {
      ...
    }
  }
});

地点：

function updateTaskSubject(task) {
  //does nothing, it's just a shell right now
}

现在没有真正做任何事情。这是html：

<div id="UpdateDiv">
 <div id="ErrorDiv">
 </div>
 <form method="post" id="UpdateTaskForm" action="Calendar.html">
  <div>
    <div class="floatLeft">
      Date:
    </div>
    <div class="floatLeft">
    </div>
    <div class="clear">
    </div>
  </div>
  <div>
    <div class="floatLeft">
      Start Time:
    </div>
    <div class="floatLeft">
      <select id="TaskStartDate" name="TaskStartDate">
      </select>
    </div>
    <div class="clear">
    </div>
  </div>
  <div>
    <div class="floatLeft">
      End Time:
    </div>
    <div class="floatLeft">
      <select id="TaskEndDate" name="TaskEndDate">
      </select>
    </div>
    <div class="clear">
    </div>
  </div>
  <div>
    <div class="floatLeft">
      Subject:
    </div>
    <div class="floatLeft">
      <textarea id="TaskSubject" name="TaskSubject" cols="30" rows="10"></textarea>
    </div>
    <div class="clear">
    </div>
  </div>
  <div>
    <input type="hidden" id="TaskId" value="" />
  </div>
  <div class="clear"></div>
 </form>
</div>

奇怪的发现

事实证明，我让这个工作的例子都把重点放回了模态本身。例如，使用验证器将消息添加到错误 div。 （成功与否）如果不这样做，模态对话框显然认为它已经完成了它需要做的事情并且只是隐藏了所有内容。不知道具体原因，但要阻止这种行为，必须将某种焦点分配给 div 本身的某些内容。

Answer 1

你在 DIV 中有你的表单，这是你想要的吗？（我没有看到表单后面的 </div>...）

<div id="UpdateDiv"> 
 <div id="ErrorDiv"> 
 </div>

应该是：

<div id="UpdateDiv"> 
 <div id="ErrorDiv"></div>
 </div>