<!DOCTYPE html>
<html>
<head>
<title>valueMissing property on the input[type=radio] element</title>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<meta content="valueMissing property on the input[type=radio] element" name="description">
<link href="https://html.spec.whatwg.org/multipage/#dom-validitystate-valuemissing" rel="help">
<link href="https://html.spec.whatwg.org/multipage/#radio-button-state-(type%3Dradio)%3Asuffering-from-being-missing" rel="help">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<form style="display: none">
<input type="radio" name="group1" id="radio1">
<input type="radio" name="group1" id="radio2">
<input type="radio" name="group2" required id="radio3">
<input type="radio" name="group2" id="radio4">
<input type="radio" name="group3" required checked id="radio5">
<input type="radio" name="group3" id="radio6">
<input type="radio" name="group4" required id="radio7">
<input type="radio" name="group4" checked id="radio8">
<input type="radio" name="group4" id="radio9">
<input type="radio" name="group5" required disabled id="radio10">
<input type="radio" name="group5" id="radio11">
<input type="radio" name="group6" required checked disabled id="radio12">
<input type="radio" name="group6" id="radio13">
</form>
<script type="text/javascript">
var cases = [
{
name: "The required attribute is not set",
group: ["radio1", "radio2"],
expected: false
},
{
name: "One of the radios is required, but none checked",
group: ["radio3", "radio4"],
expected: true
},
{
name: "One of the radios is required and checked",
group: ["radio5", "radio6"],
expected: false
},
{
name: "One of the radios is required and another one is checked",
group: ["radio7", "radio8", "radio9"],
expected: false
},
{
name: "One of the radios is required and disabled, but none checked",
group: ["radio10", "radio11"],
expected: true
},
{
name: "One of the radios is required, checked and disabled",
group: ["radio12", "radio13"],
expected: false
}
];
for (var info of cases) {
test(function () {
for (var id of info.group) {
var radio = document.getElementById(id);
assert_class_string(radio.validity, "ValidityState",
"HTMLInputElement.validity must be a ValidityState instance");
if (info.expected) {
assert_true(radio.validity.valueMissing,
"The " + id + ".validity.valueMissing should be true");
} else {
assert_false(radio.validity.valueMissing,
"The " + id + ".validity.valueMissing should be false");
}
}
}, info.name);
}
</script>
</body>
</html>
Codebase Browser
chromium