Question

除非我遗漏了某些内容，否则这似乎是Chrome中的一个错误。

以下是三种形式，每种形式都有两个无线电元素。如果没有required属性，则表单上的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>

Answer 1

我现在可以肯定地说这是Chrome中的一个错误 - 如果必需的属性很难设置，即使被删除也不会被忽略（出于有效性目的），并且不再在列表中该项目的属性。如果它确实固定在Chromium 51中，我们不必等待很长时间才能修复它。与此同时，您可以删除硬盘＆＃34; required＆＃34;属性，并使用＆＃34; setAttribute＆＃34;将其置于dyanically中。功能

请查看以下代码进行检查 - 这是一个下午的工作。默认情况下，＆＃34; required＆＃34;属性标记已删除，因此它有效。单击＆＃34; Set Required＆＃34;后，它将变为无效。删除它可以正常工作。您可以通过单击＆＃34;打印属性＆＃34;来查看rad的属性，从而正确应用它。（登录到控制台）。

＆＃34;重置Rads＆＃34;如果选择一个按钮，则清除单选按钮。

＆＃13;

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

＆＃13;

在Chrome中使用JavaScript删除必需属性时，checkValidity（）会产生false

1 个答案: