在modal和twitterbootstrap向导中运行jquery验证？

希望有人能帮我解决这个问题，已经快一天了，我还是不知道怎么解决这个问题。现在我有一个按钮，当单击打开一个jquery模式对话框时，对话框中有一个twitterbootstrap向导，可以正常工作。我可以毫无问题地单击“下一步”和“上一步”按钮，现在当我尝试对其实现jquery验证时，它在文档中提供的示例不起作用。但是，如果我从对话框中删除引导向导并将其放在一个简单的页面中，验证就可以工作了。我不知道我的代码是否遗漏了什么或有什么问题。顺便说一句，我是在asp.NETWebForm页面中这样做的。请参阅下面的代码：

头部

<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="prettify.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" type="text/css" />

正文和Jquery脚本部分

<form id="form1" runat="server">
        <div id="dialog-form" title="Create new user">

  <form>
  <fieldset>
    <div id="rootwizard">
                            <div class="navbar">
                                <div class="navbar-inner">
                                    <div class="container">
                                        <ul>
                                            <li><a href="#tab1" data-toggle="tab">Login Account Information</a></li>
                                            <li><a href="#tab2" data-toggle="tab">Personal Information</a></li>
                                            <li><a href="#tab3" data-toggle="tab">List of Available Subjects</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-content">
                                <div class="tab-pane" id="tab1">
                                    <asp:TextBox ID="emailfield" runat="server" CssClass="required email"></asp:TextBox>
                                </div>
                                <div class="tab-pane" id="tab2">
                                    2
                                </div>
                                <div class="tab-pane" id="tab3">
                                    3
                                </div>
                                <ul class="pager wizard">
                                    <li class="previous"><a href="#">Previous</a></li>
                                    <li class="next"><a href="#">Next</a></li>
                                </ul>
                            </div>  
                        </div>
  </fieldset>
  </form>

</div>
    <asp:Button ID="createuser" runat="server" Text="Button" />
    </form>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script src="bootstrap.min.js" type="text/javascript"></script>
    <script src="jquery.bootstrap.wizard.js" type="text/javascript"></script>
    <script src="prettify.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var $validator = $("#form1").validate({
                rules: {
                    emailfield: {
                        required: true,
                        email: true,
                        minlength: 3
                    }
                }
            });

            $('#rootwizard').bootstrapWizard({
                onTabClick: function (tab, navigation, index) {
                    return false;
                },
                'onNext': function (tab, navigation, index) {
                    var $valid = $("#form1").valid();
                    if (!$valid) {
                        $validator.focusInvalid();
                        return false;
                    }
                }
            });
            window.prettyPrint && prettyPrint()
        });

        $(function () {
            $("#dialog-form").dialog({
                autoOpen: false,
                height: 500,
                width: 980,
                modal: true,
                resizable: false,
                draggable: false
            });

            $("#createuser")
            .button()
            .click(function () {
                $("#dialog-form").dialog("open");
            });
        });
    </script>

$（文档）.ready（函数（）{
var$validator=$（“#form1”）.validate({
规则：{
电子邮件字段：{
要求：正确，
电子邮件：是的，
最小长度：3
}
}
});
$（“#根向导”）.bootstrapWizard({
onTabClick：功能（选项卡、导航、索引）{
返回false；
},
“onNext”：函数（选项卡、导航、索引）{
var$valid=$（“#form1”）.valid（）；
如果（！$有效）{
$validator.focusInvalid（）；
返回false；
}
}
});
window.prettyPrint&&prettyPrint（）
});
$（函数（）{
$（“#对话框窗体”）.dialog({
自动打开：错误，
身高：500，
宽度：980，
莫代尔：是的，
可调整大小：false，
可拖动：错误
});
$（“#createuser”）
.按钮（）
。单击（函数（）{
$（“#对话框窗体”）。对话框（“打开”）；
});
});

谢谢

最初的想法。。。 我看到您有一个嵌套的表单元素，即一个表单放在另一个表单中。我会改变这一点，然后再试一次，看看是否有什么变化

<form id="form1" runat="server">
    <div id="dialog-form" title="Create new user">

  <form>

我怀疑这可能是问题的根源，因为根据规范，这是不允许的

4.10.3表单元素

类别流内容。可以使用此元素的上下文： 其中流内容是预期的。内容模型：流动内容，但具有 没有表单元素子体

本质上，对内部表单的submit调用将在外部表单上触发-很可能会破坏验证，或者导致某种冲突

关于这个主题有一个很好的话题——有人甚至引用了WebKit源代码中的一个方法，如果它不是现有方法的子方法，那么这个方法只会创建一个新的

... 嗯，有点。 在快速浏览了您向我展示的示例之后，有一件事跳出来了，这就是浏览器解释表单标记的方式：

<form method="post" action="twitterwizardinsidejquerymodaldialog.aspx" id="form1" novalidate="novalidate">
  <div class="aspNetHidden">
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTA3MzQyODM5NGRkGJwy+BJArQAbccGL8gkmxzW56BSXmxDbjmF1Bht/VZc=">
  </div>

  <div class="aspNetHidden">
  <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAANJ+VG2lcl0hLS1uBTEILjay9ZjNWlmWCE+F+bmmsDR55U8pUpLxmspHusBqybX31fKmP5z3oI1K/0xP04OEpQtSyYfoXmQEPT2tZ+zsIIvWQ==">
 </div>
</form>

不知何故，表单被截断了，这意味着验证确实通过了——因为从技术上讲，输入字段不存在。（表示自动跳过验证）

如果您打开一个web检查器（即Google Chrome的开发工具）并手动将适当的元素拖到表单本身中，那么验证工作就完美了

通过查看页面的源代码，您可以看到form元素在您尝试打开新表单的位置关闭：

<form method="post" action="twitterwizardinsidejquerymodaldialog.aspx" id="form1">
  <div class="aspNetHidden">
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTA3MzQyODM5NGRkGJwy+BJArQAbccGL8gkmxzW56BSXmxDbjmF1Bht/VZc=" />
  </div>

  <div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAANJ+VG2lcl0hLS1uBTEILjay9ZjNWlmWCE+F+bmmsDR55U8pUpLxmspHusBqybX31fKmP5z3oI1K/0xP04OEpQtSyYfoXmQEPT2tZ+zsIIvWQ==" />
  </div>
  <div id="dialog-form" title="Create new user">  
<form>

这意味着什么？ 很明显，表单的嵌套导致了这种情况，我会尝试删除内部表单——不知道它的用途，只是看起来有点毫无意义

---

如果是这种情况，渲染引擎将关闭现有的表单元素，而不是打开新的表单元素。这也解释了为什么将向导放置在其他位置会允许它工作。

#FergusMorrow当我单击按钮时，将调用对话框表单id。如果我删除div对话框表单中的另一个表单标记，模态对话框将打开几秒钟，然后自动关闭。有趣的是，当你在原始帖子中说“它不工作”时，实际发生了什么？验证是否失败或只是没有发生？#FergusMorrow当它不在模态对话框内时，验证发生。“下一步”按钮将停止并显示有错误的文本框。现在，当我将向导放在模式对话框中时，验证将不会发生。当我也用firebug检查它时，表单标签在对话框表单div中丢失了。稍后我将尝试发布一个JSFIDLE用于实时演示或从我的页面粘贴一个链接。是的，JSFIDLE案例将非常有用。我的意思是，如果firebug没有看到一个内部表单元素，那么它看起来并没有创建它，可能是因为嵌套。但这仍然不能解释一切，事实上，在对

#form1

运行验证时，它应该仍然有效；外形。#FergusMorrow请看ff林