Unless I'm missing something, this seems like a bug in Chrome.

Here are three forms each with two radio elements. When there is no required attribute, then checkValidity() on the form returns true, as expected. When there ARE required attributes, then checkValidity() on the form returns false, as expected.

HOWEVER, when the required attributes are removed with JavaScript, then checkValidity() returns false. This is not what I would expect. Any explanation / workaround appreciated! This works correctly in Safari and Firefox, does not work in Chrome.

console.log('Valid form: ' + document.getElementById('validForm').checkValidity());
console.log('Invalid form: ' + document.getElementById('invalidForm').checkValidity());
//document.getElementById('rad1').required = false; //Neither this nor below work
//document.getElementById('rad2').required = false;
document.getElementById('rad1').removeAttribute('required');
document.getElementById('rad2').removeAttribute('required');
console.log('Should be valid form: ' + document.getElementById('shouldBeValidForm').checkValidity());

<form id="validForm">
  <input type="radio" name="my radio 1" value="option 1">
  <input type="radio" name="my radio 1" value="option 2">
</form>
<form id="invalidForm">
  <input type="radio" name="my radio 2" value="option 1" required>
  <input type="radio" name="my radio 2" value="option 2" required>
</form>
<form id="shouldBeValidForm">
  <input id="rad1" type="radio" name="my radio 3" value="option 1" required>
  <input id="rad2" type="radio" name="my radio 3" value="option 2" required>
</form>

Unless I'm missing something, this seems like a bug in Chrome.

Here are three forms each with two radio elements. When there is no required attribute, then checkValidity() on the form returns true, as expected. When there ARE required attributes, then checkValidity() on the form returns false, as expected.

HOWEVER, when the required attributes are removed with JavaScript, then checkValidity() returns false. This is not what I would expect. Any explanation / workaround appreciated! This works correctly in Safari and Firefox, does not work in Chrome.

console.log('Valid form: ' + document.getElementById('validForm').checkValidity());
console.log('Invalid form: ' + document.getElementById('invalidForm').checkValidity());
//document.getElementById('rad1').required = false; //Neither this nor below work
//document.getElementById('rad2').required = false;
document.getElementById('rad1').removeAttribute('required');
document.getElementById('rad2').removeAttribute('required');
console.log('Should be valid form: ' + document.getElementById('shouldBeValidForm').checkValidity());

<form id="validForm">
  <input type="radio" name="my radio 1" value="option 1">
  <input type="radio" name="my radio 1" value="option 2">
</form>
<form id="invalidForm">
  <input type="radio" name="my radio 2" value="option 1" required>
  <input type="radio" name="my radio 2" value="option 2" required>
</form>
<form id="shouldBeValidForm">
  <input id="rad1" type="radio" name="my radio 3" value="option 1" required>
  <input id="rad2" type="radio" name="my radio 3" value="option 2" required>
</form>

• javascript
• html
• forms

• You're already the first result on Google for checkValidity removeAttribute google./?q=checkValidity+removeAttribute – trex005 Commented Apr 1, 2016 at 2:23
• Works for me. Chromium 51.0.2674.0 – Oriol Commented Apr 1, 2016 at 3:24
• Interesting. I'm on 49.0.2623.87, and a few other folks on 49.xx have verified the same result. Regardless, will need to support users with older browsers, so I guess that leaves us with workarounds. Any ideas other than re-rendering the inputs entirely with JS? – AllTheCodez Commented Apr 1, 2016 at 3:34
• I've tried the same thing as your code, but replacing the radio boxes with text, and that works as expected - it may be a bug with the radio buttons.... – Guy S Commented Apr 1, 2016 at 4:49

1 Answer 1

I can now with certainty say that this is a bug in Chrome - if the required attribute is hard-set, it won't be ignored (for Validity purposes) even if removed, and is no longer in the list of attributes of that item. If it is indeed fixed in Chromium 51, we won't have to wait long for it to be fixed. In the mean time, you can remove the hard-set "required" attribute, and put it in dyanically with the "setAttribute" function.

Please see the below code to check - this has been an afternoon's work. By default, the "required" attribute tag is removed, so it is valid. Once you click "Set Required", it bees invalid. Removing it works properly. You can see it has been applied properly by checking out the Attributes of the rads by clicking "Print Attributes" (logs to console).

"Reset Rads" clears the radio buttons, if you select one.

<!DOCTYPE html>
<html>

<body>

  <form id="shouldBeValidForm">
    <input id="rad1" type="radio" name="my radio 3" value="option 1">
    <input id="rad2" type="radio" name="my radio 3" value="option 2">
  </form>

  <button onclick="setRequired()">Set Required</button>
  <button onclick="removeRequired()">Remove Required</button>
  <button onclick="checkValid()">Check if Valid</button>
  <button onclick="printAttr()">Print Attributes</button>
  <button onclick="clearButton()">Reset Rads</button>

  <script>
    function setRequired() {

      document.getElementById("rad1").setAttribute("required", "");
      document.getElementById("rad2").setAttribute("required", "");

      //document.getElementById('shouldBeValidForm').validate();

    }

    function removeRequired() {
      document.getElementById("rad2").removeAttribute("required");
      document.getElementById("rad1").removeAttribute("required");
    }

    function checkValid() {
      console.log('Should be valid form: ' + document.getElementById('shouldBeValidForm').checkValidity());
      console.log('Rad1:  ' + document.getElementById('rad1').checkValidity());
      console.log('Rad2:  ' + document.getElementById('rad2').checkValidity());

      console.log('willValidate: Rad1:  ' + document.getElementById('rad1').willValidate);
      console.log('willValidate: Rad2:  ' + document.getElementById('rad2').willValidate);

      console.log('validationMessage: Rad1:  ' + document.getElementById('rad1').validationMessage);
      console.log('validationMessage: Rad2:  ' + document.getElementById('rad2').validationMessage);

    }

    function printAttr() {
      console.log("rad1 Attributes");
      var el = document.getElementById("rad1");
      for (var i = 0, atts = el.attributes, n = atts.length, arr = []; i < n; i++) {
        console.log(atts[i].nodeName);
      }

      console.log("rad2 Attributes");
      var el = document.getElementById("rad2");
      for (var i = 0, atts = el.attributes, n = atts.length, arr = []; i < n; i++) {
        console.log(atts[i].nodeName);
      }

    }

    function clearButton() {
      document.getElementById("rad1").checked = false;
      document.getElementById("rad2").checked = false;
    }
  </script>

</body>

</html>