Checkvalidity() Yields False When Required Property Removed With Javascript In Chrome
Solution 1:
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.
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).
"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>
Post a Comment for "Checkvalidity() Yields False When Required Property Removed With Javascript In Chrome"