radio-valueMissing.html (3038B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>valueMissing property on the input[type=radio] element</title> 5 <meta content="text/html; charset=UTF-8" http-equiv="content-type"> 6 <meta content="valueMissing property on the input[type=radio] element" name="description"> 7 <link href="https://html.spec.whatwg.org/multipage/#dom-validitystate-valuemissing" rel="help"> 8 <link href="https://html.spec.whatwg.org/multipage/#radio-button-state-(type%3Dradio)%3Asuffering-from-being-missing" rel="help"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 </head> 12 <body> 13 <div id="log"></div> 14 15 <form style="display: none"> 16 <input type="radio" name="group1" id="radio1"> 17 <input type="radio" name="group1" id="radio2"> 18 19 <input type="radio" name="group2" required id="radio3"> 20 <input type="radio" name="group2" id="radio4"> 21 22 <input type="radio" name="group3" required checked id="radio5"> 23 <input type="radio" name="group3" id="radio6"> 24 25 <input type="radio" name="group4" required id="radio7"> 26 <input type="radio" name="group4" checked id="radio8"> 27 <input type="radio" name="group4" id="radio9"> 28 29 <input type="radio" name="group5" required disabled id="radio10"> 30 <input type="radio" name="group5" id="radio11"> 31 32 <input type="radio" name="group6" required checked disabled id="radio12"> 33 <input type="radio" name="group6" id="radio13"> 34 </form> 35 36 <script type="text/javascript"> 37 var cases = [ 38 { 39 name: "The required attribute is not set", 40 group: ["radio1", "radio2"], 41 expected: false 42 }, 43 { 44 name: "One of the radios is required, but none checked", 45 group: ["radio3", "radio4"], 46 expected: true 47 }, 48 { 49 name: "One of the radios is required and checked", 50 group: ["radio5", "radio6"], 51 expected: false 52 }, 53 { 54 name: "One of the radios is required and another one is checked", 55 group: ["radio7", "radio8", "radio9"], 56 expected: false 57 }, 58 { 59 name: "One of the radios is required and disabled, but none checked", 60 group: ["radio10", "radio11"], 61 expected: true 62 }, 63 { 64 name: "One of the radios is required, checked and disabled", 65 group: ["radio12", "radio13"], 66 expected: false 67 } 68 ]; 69 70 for (var info of cases) { 71 test(function () { 72 for (var id of info.group) { 73 var radio = document.getElementById(id); 74 75 assert_class_string(radio.validity, "ValidityState", 76 "HTMLInputElement.validity must be a ValidityState instance"); 77 78 if (info.expected) { 79 assert_true(radio.validity.valueMissing, 80 "The " + id + ".validity.valueMissing should be true"); 81 } else { 82 assert_false(radio.validity.valueMissing, 83 "The " + id + ".validity.valueMissing should be false"); 84 } 85 } 86 }, info.name); 87 } 88 </script> 89 </body> 90 </html>