单选按钮上的报告有效性未按预期工作答案

【问题标题】：reportValidity on radio buttons not working as expected单选按钮上的报告有效性未按预期工作
【发布时间】：2021-12-16 01:27:21
【问题描述】：

我有一些单选按钮和一些用于验证单选按钮的 JavaScript。

HTML：

<html>

<head>
</head>

<body>
    
        <input type="radio" name="radios" id="first-radio" value="option1" required>
        <label for="first-radio">
            Radio 1
        </label>
   
    
        <input type="radio" name="radios" id="second-radio" value="option2">
        <label for="second-radio">
            Radio 2
        </label>
    
    
    <input id="txt-box" type="text" required />
    
    <button id="btn-next">
        Btn Next
    </button>
    <script src="radios.js"></script>
</body>

</html>

JavaScript：

(function () {

    function validateTextbox() {
        document.getElementById('txt-box').reportValidity();
    }

    function validateRadios() {
        document.getElementById('first-radio').reportValidity();

    }

    // document.getElementById('btn-next').addEventListener('click', validateTextbox);
    document.getElementById('btn-next').addEventListener('click', validateRadios);



})();

我已经为单选按钮设置了name 来对它们进行分组，并将required 添加到其中之一。

我为按钮添加了一个事件侦听器，当我单击该按钮时，我会检查是否使用 reportValidity 检查了其中一个单选按钮。

代码似乎可以正常工作，但当我单击按钮时，Chrome 中的“请选择其中一个选项”验证警告消息不会显示，除非我将光标从按钮上移开。

任何线索为什么会这样以及我需要做什么？

如果我尝试对文本框进行相同操作，文本框会在我单击按钮后立即显示验证警告消息“请填写此字段”。

编辑：我在 Firefox 和 Edge 中尝试了相同的操作，单击按钮后会立即显示“请选择其中一个选项”和“请填写此字段”。

这是 Chrome 错误吗？

【问题讨论】：

据我所知，reportValidity() 方法适用于表单对象。您可以参考以下网页：codepen.io/chriscoyier/pen/mOzgBZ
@TheKNVB 你是对的。 developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/…我将表单元素包装在表单中，并对表单元素执行了reportValidity，但得到了相同的行为。

标签： javascript html google-chrome

【解决方案1】：

这是我的解决方案：

 document.getElementById('btn-next').addEventListener('click', validateRadios);

 function validateRadios() {
   console.log(document.getElementById('ok').reportValidity());
 }

<form id="ok">
  <input type="radio" name="radios" id="first-radio" value="option1" required>
  <label for="first-radio">
    Radio 1
  </label>


  <input type="radio" name="radios" id="second-radio" value="option2">
  <label for="second-radio">
    Radio 2
  </label>


  <input id="txt-box" type="text" required />

  <button id="btn-next">
    Btn Next
  </button>
</form>

【讨论】：

正如我在上面的评论中所述，在将单选按钮包装在表单元素中然后在表单元素上执行 reportValidity 时，Chrome 中出现了相同的错误行为。

【解决方案2】：

您的目的是检查单选按钮是否被选中。方法应该是您默认选中其中一个选项。

<input type="radio" name="radios" id="first-radio" value="option1" checked>

所以不是必需的，而是放置检查属性。

【讨论】：

当用户访问表单时，不应预先检查任何单选按钮。这是要求之一，否则您可以按照您建议的方式解决它。

【解决方案3】：

    // On clicking submit do following
    $("#btn-next").click(function() {
          
        var atLeastOneChecked = false;
        $("input[type=radio]").each(function() {
          
            // If radio button not checked
            // display alert message 
            if ($(this).attr("checked") != "checked") {
              
                // Alert message by displaying
                // error message
                $("#msg").html(
    "<span class='alert alert-danger' id='error'>"
    + "Please Choose atleast one</span>");
            }
        });
    });

您必须遍历每个单选按钮并检查是否选中了其中的任何一个。以下是我根据您的需要从中提取和修改的网址。

How to Display validation for radio

【讨论】：

我可以为此使用自定义脚本，但我正在寻找一种使用本机 API 解决此问题的方法。