Question

场景：我有一个包含多个手风琴的表单（可扩展的div），每个都有一些必填字段，用户可以自由折叠或展开它们，所以，在某些情况下，那里提交表单时 非填充必填隐藏字段 （因为崩溃）。

问题：在Chrome中，用户不会看到任何错误，只有您可以在控制台中阅读：

名称为＆＃39;＆＃39;的无效表单控件不可专注。

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

我尝试了什么：在提交表单之前，展开所有手风琴以显示所有必填字段，以便我可以让浏览器关注元素并显示必填字段 message （请参阅更新）

所需解决方案：识别需要内容的必填字段的ID，扩展其手风琴容器并关注该字段

更新：通过javascript扩展所有可折叠div的解决方案在所有情况下都不起作用，因此不是解决方案。

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

Answer 1

这可能是各种糟糕的用户体验，但我对此并不了解，所以我不会深入研究XD基本上，正如您可以从程序员所面临的实际问题中看出来的那样，隐藏必填字段是不好的。

我建议您自己实施验证，例如在change事件中。检查该手风琴部分中所有输入元素的有效性，如果其中任何一个输入元素失败，您可以在手风琴的标题栏上放置警告标志并禁用提交按钮。

只有当所有字段都通过验证时，才会启用提交按钮并允许用户继续。

当然，这确实违背了HTML5提供的原生验证的目的，但您已经使用非原生手风琴，因此您必须非原生地进行验证才能工作。

Answer 2

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

但是如果你想继续检查表单提交，那么欺骗浏览器可以通过使用JavaScript来做你想做的事。 浏览器识别并突出显示页面验证时可见的第一个无效字段（对于IE和FF，它将突出显示所有可见的无效字段）;因此，在表单验证发生之前，您需要运行快速检查并打开包含第一个无效字段的折叠部分。

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

你没有指定它是用于jQuery UI还是Bootstrap，所以这里有两个例子（代码类似，只是改变处理打开/关闭手风琴的方式）：

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;
        }
    });
});

BOOTSTRAP ACCORDION

注意：这适用于Bootstrap 3.3.4版。我还没有检查旧版本或更新版本。

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/

提交表单时显示或识别并关注隐藏的必填字段

2 个答案:

JQUERY UI ACCORDION

BOOTSTRAP ACCORDION