Question

我正在使用JQuery UI＆＃39; s tabs加上一个表单，允许用户将数据提交给php函数。用户创建的每个选项卡本质上是此函数的另一个运行，只是使用该选项卡指定的不同参数。在这种情况下，我在HTML中将这些选项卡中的某些字段标记为required，因为它们是后端函数运行所必需的。如果选择了错误选项卡，则可以对这些字段进行HTML验证，但如果未选择错误选项卡，则会引发错误：

An invalid form control with name='' is not focusable.

其中name设置为不完整字段的name属性。这对我来说很有意义，因为未显示的标签将可见性设置为false，因此浏览器认为该字段无法集中显示他们需要填写的用户。

我的问题是，有没有办法拦截这个名称属性，或者字段本身，在引发错误之前导致失效？理想情况下，我想获得对元素的引用，这将允许我为用户选择无效的选项卡，从而允许发生正确的验证协议。

我已经四处查看了如何处理所需的隐藏字段，似乎普遍的共识是删除表单提交中所有隐藏字段的required属性。虽然这可以解决错误，但我不能这样做，因为提交后后端函数需要字段。在进行后端检查哪些选项卡完成并且仅在那些选项卡上运行该功能时，这是不可取的，因为用户期望所有选项卡＆＃39;在提交时运行的数据，而不仅仅是一些。

表单和标签的缩写设置如下：

<html>
    <head>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $( function() { 
                var tabs = $( "#tabs" ).tabs();
            } );
        </script>
    </head>
    <body>
        <form name='form'>
            <div id="tabs">
                  <ul>
                    <li><a href="#tabs-1">Tab One</a></li>
                    <li><a href="#tabs-2">Tab Two</a></li>
                  </ul>
                <div id="tabs-1">
                    <input type='text' name='some_field_1' value='User entered text...' required />
                </div>
                <div id="tabs-2">
                    <input type='text' name='some_field_2' required />
                </div>
            </div>
            <input type="submit" value="Submit"><br>
        </form>
    </body>
</html>

提交此内容会使上述错误显示为：

An invalid form control with name='some_field_2' is not focusable.

由于some_field_2尚未填写且在选择时不可见。每个字段的名称都有一个数字，如使用JQuery创建的选项卡上显示的那样，表示它所属的选项卡，因此通用名称形式为some_field_#。您可以假设有任意数量的选项卡，其中任何一个或多个可能在提交时无效。

如果未填充，则隐藏必填字段

0 个答案: