Question

希望有人可以帮助我，这已经差不多一天了，我仍然无法弄清楚如何解决这个问题。现在我有一个按钮，当点击打开一个jquery模式对话框时，在对话框中有一个twitterbootstrap向导工作正常。我可以毫无问题地单击下一个和上一个按钮，现在当我尝试对它实现jquery验证时，它的文档中提供的示例不起作用。但是，如果我从对话框中删除引导程序向导并将其放在一个简单的页面中，则验证工作正常。我不知道我错过了什么或者我的代码出了什么问题。顺便说一下，我在asp.net webform页面中这样做。请参阅下面的代码：

主管科

<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>

由于

Answer 1

初步想法......

我看到你有一个嵌套的表单元素 - 即一个放在另一个表单中的表单。我会改变它，然后再试一次，看看是否有任何变化。

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

  <form>

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

4.10.3表单元素

分类流程内容。可以使用此元素的上下文：   在哪里有流量内容。内容模型：流内容，但有   没有形式元素的后代。

Source

本质上，在内部表单上调用提交将触发外部表单 - 最有可能破坏验证，或导致某种冲突。

主题上有一个很棒的主题here - 有人甚至引用了WebKit源代码中找到的方法，如果它不直接创建新的<form>现有的孩子。

......好吧，有点。

快速查看了您向我展示的示例，有一件事情已经跳出来，这就是浏览器解释表单标记的方式：

<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>

不知何故，表单被截断，意味着验证传递 - 因为该输入字段在技术上并不存在。（自动跳过含义验证）

如果您打开网络检查员（即Google Chrome浏览器的开发者工具）并手动将相应的元素拖到表单本身 - ，那么验证工作正常。

通过查看页面来源，您可以看到表单元素准确关闭您尝试打开新表单的位置：

<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>

所以这意味着什么？

很明显，表单的嵌套导致了这种情况，我会尝试删除内部表单 - 不知道它的目的，它看起来有点无意义。

如果是这种情况，那么渲染引擎将关闭现有的表单元素，而不是打开新的表单元素。这也可以解释为什么将向导放在其他地方可以使它工作。

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

1 个答案:

初步想法......

......好吧，有点。

所以这意味着什么？