提交表单时显示或识别并关注隐藏的必填字段 [英] Show or Identify and focus a hidden mandatory field when submitting form
问题描述
strong>：在Chrome中，用户不会看到任何错误，只有在您可以阅读的控制台中：
$ b
无效的窗体控件name = '是不可聚焦的。
我发现这个问题有很多答案。我完全知道为什么会发生这种情况，但我还没有找到解决问题的办法。
>：在提交表单之前，展开所有手风琴以使所有必填字段可见，以便我可以允许浏览器聚焦元素并显示必填字段邮件（请参阅更新） 期望的解决方案：标识需要内容的必填字段的ID，展开手风琴容器并关注字段
UPDATE ：
解决方案发现通过javascript扩展所有可折叠div并不是在所有情况下工作，所以不是解决方案。
问题：有一些方法可以在验证前显示字段？如果没有...我可以在提交表单时专注或识别一个隐藏的必填字段。 我个人会和 href =https://stackoverflow.com/questions/29350787/show-or-identify-and-focus-a-hidden-mandatory-field-when-submitting-form#answer-29351090>尼采黑暗Absol的建议关于在更改部分和显示警告标志时检查字段（我认为这会提供更好的用户体验）。
但是如果你想继续检查表单提交，就有一种方法可以让浏览器根据JavaScript来做你想做的事情。 浏览器识别并突出显示页面验证时可见的第一个无效字段（对于IE和FF，它将突出显示所有可见的无效字段）;因此，在表单验证发生之前，您需要运行快速检查并打开包含第一个无效字段的手风琴部分。
关键是运行在HTML5验证发生之前检查。这意味着 onsubmit 不够好，因为浏览器将在 submit 事件之前验证。当点击提交按钮/图像时，您需要运行代码，因为点击事件发生在浏览器验证字段之前。
你没有指定它是否用于jQuery UI或Bootstrap，所以这里是两个例子（代码是相似的，只是改变处理打开/关闭手风琴的方式）：
JQUERY UI ACCORDION
您可以在此JSFiddle上看到jQuery UI的工作演示： http://jsfiddle.net/ma8v32ug/1/ 。 JavaScript的检查将如下所示：
//将手风琴保存在一个变量中，因为您稍后需要它
$ accordion = $（＃accordion）。accordion（）;
//点击提交时
$（＃myForm input [type ='submit']）。on（click，function（event）{
//遍历所有需要的元素寻找一个空元素
$（＃myForm input [required ='required']）。each（function（）{
//如果值为空，则表示无效
if（$（this）.val（）==）{
//找到最接近的h3的索引（除以2，因为jQuery UI手风琴成对h3-div。有点哈克，抱歉）
var item = $（this）.closest（。ui-accordion-content）。prev（）。index （）/ 2;
//打开包含必填字段的手风琴部分
$ accordion.accordion（option，active，item）;
//停止滚动所需的元素
返回false;
}
}）;
}）;
BOOTSTRAP ACCORDION
注意：这对Bootstrap 3.3.4版本有效。我还没有检查旧版本或更新版本。
Bootstrap需要考虑的一件重要事情是，您不能使用 .collapse（ {toggle：true}）功能，因为动画需要比浏览器验证表单所需的时间更长的时间，并且结果将是意外的（通常，浏览器将停止动画指向错误，它不会是你想要的字段）。
解决这个问题的方法是切换而不是动画，只需通过更改面板中的 .in 类，并调整目标面板高度。最后，这个函数看起来非常接近于jQuery UI的功能，只是稍微改变了一下：
//当提交点击
$（＃myForm input [type ='submit']）。on（click，function（event）{
//遍历所有需要的元素一个空的
$（＃myForm input [required ='required']）。each（function（）{
//如果值为空，表示无效
if（$（this）.val（）==）{
//隐藏当前打开的手风琴并打开无效字段
$（ （.in）;
$（this）.closest（。panel-collapse）.addClass（in）.css（height，auto ）;
//停止滚动所需元素
返回false;
}
}）;
}）;
你可以看到它在JSFiddle上工作： http://jsfiddle.net/ma8v32ug/2/
Scenario: I have a form with several accordions (that are expandable divs), each one has some required fields, the user is free to collapse or expand them, so, in some cases, there are non filled mandatory hidden fields (because collapse) when form is submitted.
Problem: In Chrome, no errors appears to user, only in the console you can read:
An invalid form control with name='' is not focusable.
I've found plenty of answers to this issue. I exactly know why is this happening, but I've not found any solution to my problem.
What i've tried: Before submitting the form, expand all accordions to make visible all required fields so I can allow browser to focus element and show Required field message (see update)
Desired solution: identify id of mandatory field that requires a content, to expand it's accordion container and focus the field
UPDATE: Solution found expanding all collapsable divs by javascript is not working in all cases, so IS NOT a solution.
QUESTION: there is some way can I show the field before validation?? If no... Can I focus or identify a hidden mandatory field when submitting form.
I personally would go with Niet the Dark Absol's suggestion about checking fields when changing section and displaying warning flags (I think it would give a better user experience).
But if you want to continue with the check on form submission, there's a way of tricking the browser into doing what you want by using JavaScript. The browser identifies and highlights the first invalid field that is visible when the page validates (for IE and FF it will highlight all the invalid fields that are visible); so, before the form validation happens, you'd need to run a quick check and open the accordion section that contains the first invalid field.
The key is to run that check before the HTML5 validation happens. That means that onsubmit is not good enough, as the browser will validate before the submit event. You need to run the code when the submit button/image is clicked, as that click event happens before the browser validates the fields.
You didn't specify if it was for jQuery UI or Bootstrap, so here are examples for both (the code is similar, just changing the way to handle opening/closing the accordion):
JQUERY UI ACCORDION
You can see a working demo for jQuery UI on this JSFiddle: http://jsfiddle.net/ma8v32ug/1/. The JavaScript check would be like this:
// 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
Note: this is valid for version 3.3.4 of Bootstrap. I haven't checked in older or newer versions.
One important thing to take into account for Bootstrap is that you cannot use the .collapse({toggle: true}) functionality because the animation takes more time than what the browser needs to validate the form, and the result will be unexpected (normally, the browser will stop the animation to point at the error, and it will not be the field that you want).
A solution to that is to do the toggle without animation, just by changing the .in class in the panels, and adjusting the target panel height. In the end, the function would look really close to the one for jQuery UI, just changing slightly:
// 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;
}
});
});
You can see it working on this JSFiddle: http://jsfiddle.net/ma8v32ug/2/
这篇关于提交表单时显示或识别并关注隐藏的必填字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
