解決した

checkValidity()は、必要なプロパティがJavaScriptでJavaScriptで削除されたときにfalseを返します

フロントエンド

何かが欠けていない限り、これはChromeのバグのようです。

ここにはそれぞれ2つの無線要素を持つ3つの形式があります。 必須の属性がない場合、フォームのcheckValidity()は期待どおりtrueを返します。 必要な属性がある場合、フォームのcheckValidity()は、期待どおりにfalseを返します。

しかし、JavaScriptで必要な属性が削除されると、checkValidity()はfalseを返します。 これは私が期待するものではありません。 任意の説明/回避策が評価されました! これはSafariとFirefoxで正しく動作し、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>


Progress 100%

一番いい

回答

フロントエンド

私はこれがChromeのバグだと言うことができるようになりました。必要な属性がハード設定されている場合、削除されても無視されず(削除されても)、そのアイテムの属性のリストには。 Chromium 51で実際に修正されている場合は、修正するまで待つ必要はありません。 その間、ハード設定された「必須」属性を削除し、「setAttribute」機能を使用してその属性を動的に配置することができます。

チェックのために以下のコードを見てください - これは午後の仕事です。 デフォルトでは、必須属性タグは削除されているため、有効です。 「Set Required」をクリックすると無効になります。 それを削除すると正常に動作します。 「属性の印刷」(コンソールへのログ)をクリックすると、Radの属性をチェックすることで、正しく適用されていることがわかります。

ラジオボタンを選択すると、ラジオボタンがクリアされます。

<!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>