在Chrome中使用JavaScript删除必需属性时，checkValidity（）会产生false [英] checkValidity() yields false when required property removed with JavaScript in Chrome
问题描述
除非我遗漏了某些内容，否则这似乎是Chrome中的一个错误。
Unless I'm missing something, this seems like a bug in Chrome.
这里有三个表格，每个表格有两个无线电元素。如果没有required属性，则表单上的checkValidity（）将返回true，如预期的那样。当存在必需的属性时，表单上的checkValidity（）会返回false，如预期的那样。
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.
但是，当使用JavaScript删除所需的属性时，checkValidity（）会返回假。这不是我所期望的。任何解释/解决方法赞赏！这在Safari和Firefox中正常工作，在Chrome中不起作用。
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>
推荐答案
我现在可以肯定地说这是Chrome中的一个错误 - 如果必需属性很难-set，即使被删除也不会被忽略（出于有效性目的），并且不再在该项的属性列表中。如果它确实固定在Chromium 51中，我们将不必等待很长时间才能修复它。同时，您可以删除硬盘必需属性，并使用setAttribute函数将其置于dyanically中。
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.
请参阅以下代码检查 - 这是一个下午的工作。默认情况下，required属性标记被删除，因此它是有效的。单击Set Required后，它将变为无效。删除它工作正常。您可以通过单击打印属性（记录到控制台）检查rad的属性来正确应用它。
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 becomes 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).
重置Rads清除收音机按钮，如果你选择一个。
"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>
这篇关于在Chrome中使用JavaScript删除必需属性时，checkValidity（）会产生false的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
