如何在折叠的详细信息中显示需要表单的警告？

Question

我有一个表单，在详细信息标签内有一个必需的复选框。当用户尝试在不选中复选框的情况下提交站点时，会显示一条警告。

但是当用户折叠详细信息时，不会显示任何警告并且提交也不起作用。是否有一种干净的 html 方法来实现此功能，或者我是否需要使用 javascript？我基本上希望浏览器自动打开详细信息并在复选框处显示警告。

问题请看这个demo https://jsfiddle.net/1jwdm8ov/

<html>
    <form>
        <details>
            <input type="checkbox" required="required">
        </details>
        <input type="submit">
    </form>
</html>

Answer 1

我想不出使用 CSS 执行此操作的方法，但您可以使用 javascript 连接到浏览器表单验证并检查是否需要某个字段。如果需要输入但尚未完成，您可以使用 .open = true; 打开父详细信息元素，这将允许显示所需的消息。

var detailInputs = document.querySelectorAll('form details input');

[].forEach.call(detailInputs, function(detailInputs) {
  detailInputs.addEventListener('invalid',function(e){
    detailInputs.parentNode.open = true;
  });
});

<form>
  <details>
    <input type="checkbox" required="required">
  </details>
  <input type="submit">
</form>

如何在折叠的详细信息中显示需要表单的警告？

How to show form required warning in collapsed details?

html

forms

details-tag