使用jquery对话框在验证子例程上提前提交html表单

我正在使用jquery对话框在表单完成期间显示消息。除了最后一个对话框外，其他所有对话框似乎都能工作。最后一个会短暂显示，但X不会出现，框会自动解除，表单会提前提交

不完整对话框的示例如下：

表单必须在X图像有时间显示之前提交

我正在使用jquery-1.10.1

我认为这可能是jquery的问题。当我用一个简单的警报替换jquery对话框时，它就工作了

下面是JavaScript：

  function valdata() {
    alert ("watch closely; dialog box will pop up; dismiss automatically; and form will submit")
      $("<div title='Basic dialog onclick'>made simple b4 submit</div>").dialog();
  return

以下是html：

  <FORM NAME="mainform" METHOD="POST" ACTION="http://www.bbhq.com/dummy.htm"
      onSubmit="return valdata()"  >

      <a href="#" onclick="alertok('see, it works here')">test dialog box here</a><p>

  1. this is question 1.
    <input type=text name=ques1><p>
  2. this is question 1.
    <input type=text name=ques2><p>
  3. this is question 1.
      <input type=text name=ques3><p>


  <INPUT TYPE="submit" VALUE="  Click here to submit the form   ">

  </FORM>

在onSubmit代码中，我尝试了返回和不返回

我尝试删除onsubmit，并用一个按钮替换输入submit，该按钮调用函数，然后提交表单。结果是一样的

我的样本在这里： 很抱歉我不能让JSFIDLE为我工作

我是jquery的新手，但我已经设计了几十个表单。我是不是漏掉了什么明显的东西

---

谢谢，

将以下内容添加到您的页面，而不是表单上的onsubmit属性：

$(document).ready(function() {

    $('form[name="mainform"]').submit(function(e) {
       e.preventDefault();
       e.stopImmediatePropagation();

       valdata();
       return false;
    });
});

它的作用是：

1等待dom加载：

$(document).ready(function() {

2将提交处理程序绑定到表单：

$('form[name="mainform"]').submit(function(e) {

3停止默认浏览器行为，即：在窗体上的属性操作之后

e.preventDefault();

4阻止事件在调用堆栈中冒泡

e.stopImmediatePropagation();

5调用你的函数

valdata();

6返回false以防止表单提交返回true以允许表单提交

return false;