javascript - 提交表单时显示或识别并聚焦隐藏的必填字段

Question

场景:我有一个带有多个 Accordion (可扩展的 div)的表单，每个 Accordion 都有一些必填字段，用户可以自由折叠或展开它们，因此，在某些情况下，有提交表单时是未填充的强制性隐藏字段(因为折叠)。

问题:在 Chrome 中，没有向用户显示任何错误，只有在控制台中您可以阅读:

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

我找到了 plenty of answers到这个问题。我完全知道为什么会这样，但我还没有找到解决我的问题的方法。

我尝试过的:在提交表单之前，展开所有 Accordion 以使所有必填字段可见，这样我就可以让浏览器聚焦元素并显示必填字段消息(查看更新)

所需的解决方案:识别需要内容的必填字段的 id，扩展它的 Accordion 容器并聚焦该字段

更新: 发现通过 javascript 展开所有可折叠 div 的解决方案并非在所有情况下都有效，因此不是解决方案。

问题:有什么方法可以在验证前显示字段？？如果不是...我可以在提交表单时关注或识别隐藏的必填字段吗？

Answer 1

我个人会选择 Niet the Dark Absol's suggestion关于在更改部分和显示警告标志时检查字段(我认为这会提供更好的用户体验)。

但是如果您想继续检查表单提交，可以使用 JavaScript 来欺骗浏览器执行您想要的操作。 浏览器识别并突出显示页面验证时可见的第一个无效字段(对于 IE 和 FF 它将突出显示所有可见的无效字段)；因此，在进行表单验证之前，您需要快速检查并打开包含第一个无效字段的 Accordion 部分。

关键是在 HTML5 验证发生之前运行该检查。这意味着 onsubmit 不够好，因为浏览器将在 submit 事件之前进行验证。您需要在单击提交按钮/图像时运行代码，因为 click 事件发生在浏览器验证字段之前。

您没有指定它是用于 jQuery UI 还是用于 Bootstrap，所以这里是两者的示例(代码相似，只是改变了处理打开/关闭 Accordion 的方式):

JQUERY UI Accordion

您可以在这个 JSFiddle 上看到 jQuery UI 的工作演示:http://jsfiddle.net/ma8v32ug/1/ . JavaScript 检查将是这样的:

// save the accordion in a variable as you'll need it later
$accordion = $("#accordion").accordion();

// when the submit is clicked
$("#myForm input[type='submit']").on("click", function(event) {

    // traverse all the required elements looking for an empty one
    $("#myForm input[required='required']").each(function() {

        // if the value is empty, that means that is invalid
        if ($(this).val() == "") {

            // find the index of the closest h3 (divide by 2 because jQuery UI accordion goes in pairs h3-div. A bit hacky, sorry)
            var item = $(this).closest(".ui-accordion-content").prev().index() / 2;

            // open that accordion section that contains the required field
            $accordion.accordion("option","active", item);

            // stop scrolling through the required elements
            return false;
        }
    });
});

---

自举 Accordion

注意:这对 Bootstrap 3.3.4 版本有效。我没有 checkin 旧版本或更新版本。

对于 Bootstrap 要考虑的一件重要事情是您不能使用 .collapse({toggle: true}) 功能，因为动画花费的时间比浏览器验证表单所需的时间长，结果会出乎意料(正常情况下，浏览器会停止动画指向错误，不会是你想要的字段)。

一个解决方案是在没有动画的情况下进行切换，只需更改面板中的 .in 类，并调整目标面板高度。最后，该功能看起来非常接近 jQuery UI 的功能，只是略有变化:

// when the submit is clicked
$("#myForm input[type='submit']").on("click", function(event) {

    // traverse all the required elements looking for an empty one
    $("#myForm input[required='required']").each(function() {

        // if the value is empty, that means that is invalid
        if ($(this).val() == "") {

            // hide the currently open accordion and open the one with the invalid field
            $(".panel-collapse.in").removeClass("in");
            $(this).closest(".panel-collapse").addClass("in").css("height","auto");

            // stop scrolling through the required elements
            return false;
        }
    });
});

你可以看到它在这个 JSFiddle 上工作:http://jsfiddle.net/ma8v32ug/2/