reportValidity on radio buttons not working as expected-CodePudding

I have some radio buttons and some JavaScript for validating the radio buttons.

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);



})();

I've set name for the radio buttons to group them and added required to one of them.

I have added an event listener for the button and when I click the button I check if one of the radio buttons are checked using reportValidity.

The code seems to work except for when I click the button the "Please select one of these options" validation warning message in Chrome doesn't show up unless I move the cursor away from the button.

Any clues why that is and what I need to do instead?

If I try the same with a textbox, the textbox shows the validation warning message 'Please fill out this field' immediately after I click the button.

Edit: I tried the same in Firefox and Edge and both the 'Please select one of these options' and 'Please fill out this field' show up immediately after I click the button.

Is this a Chrome bug?

CodePudding user response：

Here is my solution:

 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>

CodePudding user response：

Your purpose is to check if the radio button is checked or not. The approach should be that you keep checked one of the options by default.

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

So instead of required, put checked attribute.

CodePudding user response：

    // 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>");
            }
        });
    });

You will have to loop through each radio button and check if any of them is checked. Following is the url from which I extracted and modified as per your need.

How to Display validation for radio