gpt4 book ai didi

javascript - 当在 Chrome 中使用 JavaScript 删除必需属性时,checkValidity() 会返回 false

转载 作者:行者123 更新时间:2023-11-28 05:22:45 24 4
gpt4 key购买 nike

除非我遗漏了什么,否则这似乎是 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com