除非我遗漏了什么，否则这似乎是 Chrome 中的一个错误。
这里有三种形式，每种形式都有两个单选元素。当没有必需的属性时，表单上的 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>最佳答案
我现在可以肯定地说这是 Chrome 中的一个错误 - 如果 required 属性是硬设置的，即使删除它也不会被忽略(出于有效性目的)，并且不再在属性列表中该项目的。如果它确实在 Chromium 51 中被修复，我们将不必等待很长时间才能修复它。同时，您可以删除硬设置的“required”属性，并使用“setAttribute”函数将其动态放入。
请查看下面的代码进行检查 - 这是一个下午的工作。默认情况下，“required”属性标签被移除，所以它是有效的。一旦点击“设置必填”，则无效。删除它可以正常工作。您可以通过单击“打印属性”(记录到控制台)来检查 rads 的属性，从而看到它已正确应用。
如果您选择一个单选按钮，“重置辐射”会清除单选按钮。
<!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>关于javascript - 当在 Chrome 中使用 JavaScript 删除必需属性时，checkValidity() 会返回 false，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36346858/