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><formid="shouldBeValidForm"><inputid="rad1"type="radio"name="my radio 3"value="option 1"><inputid="rad2"type="radio"name="my radio 3"value="option 2"></form><buttononclick="setRequired()">Set Required</button><buttononclick="removeRequired()">Remove Required</button><buttononclick="checkValid()">Check if Valid</button><buttononclick="printAttr()">Print Attributes</button><buttononclick="clearButton()">Reset Rads</button><script>functionsetRequired() {
document.getElementById("rad1").setAttribute("required", "");
document.getElementById("rad2").setAttribute("required", "");
//document.getElementById('shouldBeValidForm').validate();
}
functionremoveRequired() {
document.getElementById("rad2").removeAttribute("required");
document.getElementById("rad1").removeAttribute("required");
}
functioncheckValid() {
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);
}
functionprintAttr() {
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);
}
}
functionclearButton() {
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"