All*_*dez 1 javascript forms html5
除非我遗漏了什么,否则这似乎是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>小智 5
我现在可以肯定地说这是Chrome中的一个错误 - 如果必需属性是硬设置的,即使被删除也不会被忽略(出于有效性目的),并且不再在该项的属性列表中.如果它确实固定在Chromium 51中,我们将不必等待很长时间才能修复它.同时,您可以删除硬设置的"required"属性,并使用"setAttribute"函数将其置于dyanically中.
请查看以下代码进行检查 - 这是一个下午的工作.默认情况下,"required"属性标记被删除,因此它是有效的.单击"Set Required"后,它将变为无效.删除它可以正常工作.您可以通过单击"打印属性"(记录到控制台)检查rad的属性来正确应用它.
如果选择一个,"Reset 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>