Javascript 提交表单时显示或标识并聚焦隐藏的必填字段

场景：我有一个带有多个手风琴（可扩展div）的表单，每个表单都有一些必填字段，用户可以自由折叠或扩展它们，因此，在某些情况下，提交表单时会出现未填充的强制隐藏字段（因为折叠）

问题：在Chrome中，用户不会看到任何错误，只有在控制台中才能看到：

名称为“”的无效表单控件不可聚焦

我发现了这个问题。我确切地知道为什么会发生这种情况，但我还没有找到任何解决问题的办法

我尝试的内容：提交表单之前，展开所有accordions，使所有必填字段可见，这样我就可以允许浏览器聚焦元素并显示必填字段消息（请参阅更新）

所需解决方案：确定需要内容的必填字段的id，以扩展其accordion容器并聚焦该字段

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

---

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

这可能是各种糟糕的用户体验，但我对此不太了解，因此我基本上不会深入讨论XD，因为您可以从程序员面临的实用性问题中看出，隐藏必填字段是不好的

我建议自己实现验证，比如在

change

事件中。检查该accordion部分中所有输入元素的有效性，如果其中任何元素失败，您可以在accordion的标题栏上放置警告标志并禁用提交按钮

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

---

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

我个人同意在更改节和显示警告标志时检查字段（我认为这将提供更好的用户体验）

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

关键是在HTML5验证之前运行检查。这意味着

onsubmit

不够好，因为浏览器将在

submit

事件之前进行验证。您需要在单击submit按钮/图像时运行代码，因为

click

事件发生在浏览器验证e字段

您没有指定它是用于jQuery UI还是用于引导，因此下面是这两个方面的示例（代码类似，只是更改了打开/关闭手风琴的方式）：

jqueryui手风琴 您可以在此JSFIDLE上看到jQuery UI的工作演示：。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;
        }
    });
});

---

自举手风琴 注意：这对3.3.4版本的引导有效。我没有签入旧版本或新版本

引导过程中需要考虑的一个重要问题是，您不能使用

.collapse（{toggle:true}）

功能，因为动画所花费的时间超过浏览器验证表单所需的时间，并且结果将是意外的（通常情况下，浏览器将停止动画以指向错误，并且它将不是您想要的字段）

解决方法是在没有动画的情况下进行切换，只需在面板中更改

类中的
，并调整目标面板高度。最后，该函数看起来非常接近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;
        }
    });
});

您可以看到它在这个JSFIDLE上工作：
这是使用jQuery UI手风琴吗？如果您已经在使用jQuery UI，为什么不向onSubmit添加一个带有提交成功/失败消息的模式窗口呢？Jordi使用的是引导，而不是jQuery UI-几乎完成了，问题是我使用的是
引导
，而不是
jqueryUI
，我几乎完成了我的目标是，我可以确定必填字段为空，现在的问题是：相同的函数在divs开头扩展accordios:
$（“#”+itemId）.collapse（{toggle:true}）
在我发现空的必填字段时不起作用…有什么想法吗？？？你应该在问题中指定引导。无论如何，代码非常相似。唯一的问题是你不能打开/折叠带有动画的面板，因为表单验证将在动画完成之前进行，它将破坏效果。因此，只需使用jQuery手动执行即可。我使用引导解决方案更新了答案。Alvaro，抱歉延迟，复活节…>；）无论如何，它很有魅力！非常感谢您的努力、解释和修改…此解决方案适用于文本类型的输入，是否有针对所需输入的单选按钮的解决方案？@MrLewk欢迎任何改进/建议，无论问题有多老。让我检查并更新答案。