form-validation-validate.html (5206B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Constraint validation</title> 4 <link rel="author" title="Intel" href="http://www.intel.com/"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/#constraint-validation"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <div id="log"></div> 9 <form id="fm1" style="display:none"> 10 <fieldset id="test0"> 11 <input type="text" required value="" id="test1"> 12 </fieldset> 13 <input type="email" value="abc" id="test2"> 14 <button id="test3">TEST</button> 15 <select id="test4"></select> 16 <textarea id="test5"></textarea> 17 <output id="test6"></output> 18 </form> 19 <form id="fm2" style="display:none"> 20 <fieldset> 21 <input type="text" required value="abc"> 22 </fieldset> 23 <input type="email" value="test@example.com"> 24 <button>TEST</button> 25 <select></select> 26 <textarea></textarea> 27 <output></output> 28 </form> 29 <form id="fm3" style="display:none"> 30 <fieldset id="fs"> 31 <legend><input type="text" id="inp1"></legend> 32 <input type="text" required value="" id="inp2"> 33 </fieldset> 34 </form> 35 36 <script> 37 var cancelable = true, 38 times1 = 0, 39 times2 = 0, 40 invalidList1 = [], 41 invalidList2 = [], 42 test1, 43 test2, 44 fm1, 45 fm2, 46 fm3; 47 48 setup(function () { 49 fm1 = document.getElementById("fm1"); 50 fm2 = document.getElementById("fm2"); 51 fm3 = document.getElementById("fm3"); 52 test1 = document.getElementById("test1"); 53 test2 = document.getElementById("test2"); 54 for (var index = 0; index < fm1.elements.length; index++) { 55 var ele = fm1.elements.item(index); 56 ele.addEventListener("invalid", function (e) { 57 times1++; 58 invalidList1.push(e.target); 59 if (!e.cancelable) 60 cancelable = e.cancelable; 61 }, false); 62 } 63 64 for (var index = 0; index < fm2.elements.length; index++) { 65 var ele = fm2.elements.item(index); 66 ele.addEventListener("invalid", function (e) { 67 times2++; 68 invalidList2.push(ele); 69 }, false); 70 } 71 }); 72 73 test(function(){ 74 assert_false(fm1.checkValidity(), "The checkValidity method should be false."); 75 }, "If there is any invalid submittable element whose form owner is the form, the form.checkValidity must be false"); 76 77 test(function(){ 78 assert_true("reportValidity" in fm1, "The reportValidity method is not supported"); 79 assert_false(fm1.reportValidity(), "The reportValidity method should be false."); 80 }, "If there is any invalid submittable element whose form owner is the form, the form.reportValidity must be false"); 81 82 test(function(){ 83 assert_true(fm2.checkValidity(), "The checkValidity method should be true."); 84 }, "If all of the submittable elements whose form owner is the form are valid, the form.checkValidity must be true"); 85 86 test(function(){ 87 assert_true("reportValidity" in fm2, "The reportValidity method is not supported."); 88 assert_true(fm2.reportValidity(), "The reportValidity method should be true."); 89 }, "If all of the submittable elements whose form owner is the form are valid, the form.reportValidity must be true"); 90 91 test(function(){ 92 assert_false(fm3.checkValidity(), "The checkValidity method should be false."); 93 document.getElementById("fs").disabled = true; 94 assert_true(fm3.checkValidity(), "The checkValidity method should be true."); 95 96 document.getElementById("inp1").value = "aaa"; 97 document.getElementById("inp1").type = "url"; 98 assert_false(fm3.checkValidity(), "The checkValidity method should be false."); 99 }, "Check the checkValidity method of the form element when it has a fieldset child"); 100 101 test(function(){ 102 // Restore the condition to default which was modified during the previous test. 103 document.getElementById("fs").disabled = false; 104 document.getElementById("inp1").value = ""; 105 document.getElementById("inp1").type = "text"; 106 107 assert_true("reportValidity" in fm3, "The reportValidity method is not supported."); 108 assert_false(fm3.reportValidity(), "The reportValidity method should be false."); 109 document.getElementById("fs").disabled = true; 110 assert_true(fm3.reportValidity(), "The reportValidity method should be true."); 111 112 document.getElementById("inp1").value = "aaa"; 113 document.getElementById("inp1").type = "url"; 114 assert_false(fm3.reportValidity(), "The reportValidity method should be false."); 115 }, "Check the reportValidity method of the form element when it has a fieldset child"); 116 117 test(function () { 118 assert_equals(times1, 4, "The invalid event will be fired if the checkValidity or reportValidity method are called."); 119 assert_array_equals(invalidList1, [test1, test2, test1, test2], "The invalid event must be fired at the invalid control"); 120 assert_true(cancelable, "The invalid event is cancelable."); 121 }, "The invalid event must be fired at the invalid controls"); 122 123 test(function () { 124 assert_equals(times2, 0, "The invalid event should not be fired, times should be 0."); 125 assert_array_equals(invalidList2, [], "The invalid event should not be fired, invalid list should be empty"); 126 }, "The invalid event must not be fired at the invalid controls"); 127 </script>