场景：我有一个包含多个手风琴的表单（它们是可扩展的div），每个表单都有一些必填字段，用户可以自由折叠或扩展它们，因此，在某些情况下，存在未填充的强制性隐藏字段（因为折叠）提交表单时。
问题：在Chrome中，用户不会看到任何错误，只有在控制台中您才能阅读：
名称=''的无效表单控件不可聚焦。
我已经找到了许多解决这个问题的方法。我完全知道为什么会这样，但是我没有找到解决问题的办法。
我已经尝试过的操作：在提交表单之前，展开所有手风琴以显示所有必填字段，这样我就可以允许浏览器聚焦元素并显示必填字段消息（请参阅更新）
所需的解决方案：标识需要内容的必填字段的ID，以扩展它的手风琴容器并集中该字段
更新：解决方案发现在所有情况下都无法通过javascript扩展所有可折叠div，因此不是解决方案。
问题：有一些方法可以在验证之前显示该字段？如果否...提交表单时，我可以集中精力还是识别一个隐藏的必填字段。
我个人会赞同Niet the Dark Absol的建议，即在更改节和显示警告标志时检查字段（我认为这样做会带来更好的用户体验）。
但是，如果您想继续检查表单提交，则有一种方法可以诱使浏览器使用JavaScript来完成所需的工作。浏览器识别并突出显示页面验证时可见的第一个无效字段（对于IE和FF，它将突出显示所有可见的无效字段）；因此，在进行表单验证之前，您需要运行快速检查并打开包含第一个无效字段的手风琴部分。
关键是在HTML5验证发生之前运行该检查。这意味着onsubmit不够好，因为浏览器将在submit事件发生之前进行验证。单击提交按钮/图像时，您需要运行代码，因为该click事件发生在浏览器验证字段之前。
您没有指定是用于jQuery UI还是Bootstrap，因此这里是这两个示例（代码相似，只是更改了处理手风琴打开/关闭的方式）：
您可以在以下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版本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/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句