0

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

但是当用户折叠详细信息时，不会显示任何警告，提交也不起作用。有没有一种干净的 html 方法可以让它工作，还是我需要使用 javascript？我基本上希望浏览器自动打开详细信息并在复选框中显示警告。

有关问题，请参阅此演示 https://jsfiddle.net/1jwdm8ov/

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

1 回答 1

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>

于 2019-06-18T13:23:17.360 回答