| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>Constraint validation</title> |
| <link rel="author" title="Intel" href="http://www.intel.com/"> |
| <link rel="help" href="https://html.spec.whatwg.org/multipage/#constraint-validation"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <div id="log"></div> |
| <form id="fm1" style="display:none"> |
| <fieldset id="test0"> |
| <input type="text" required value="" id="test1"> |
| </fieldset> |
| <input type="email" value="abc" id="test2"> |
| <button id="test3">TEST</button> |
| <select id="test4"></select> |
| <textarea id="test5"></textarea> |
| <output id="test6"></output> |
| </form> |
| <form id="fm2" style="display:none"> |
| <fieldset> |
| <input type="text" required value="abc"> |
| </fieldset> |
| <input type="email" value="test@example.com"> |
| <button>TEST</button> |
| <select></select> |
| <textarea></textarea> |
| <output></output> |
| </form> |
| <form id="fm3" style="display:none"> |
| <fieldset id="fs"> |
| <legend><input type="text" id="inp1"></legend> |
| <input type="text" required value="" id="inp2"> |
| </fieldset> |
| </form> |
| |
| <script> |
| var cancelable = true, |
| times1 = 0, |
| times2 = 0, |
| invalidList1 = [], |
| invalidList2 = [], |
| test1, |
| test2, |
| fm1, |
| fm2, |
| fm3; |
| |
| setup(function () { |
| fm1 = document.getElementById("fm1"); |
| fm2 = document.getElementById("fm2"); |
| fm3 = document.getElementById("fm3"); |
| test1 = document.getElementById("test1"); |
| test2 = document.getElementById("test2"); |
| for (var index = 0; index < fm1.elements.length; index++) { |
| var ele = fm1.elements.item(index); |
| ele.addEventListener("invalid", function (e) { |
| times1++; |
| invalidList1.push(e.target); |
| if (!e.cancelable) |
| cancelable = e.cancelable; |
| }, false); |
| } |
| |
| for (var index = 0; index < fm1.elements.length; index++) { |
| var ele = fm2.elements.item(index); |
| ele.addEventListener("invalid", function (e) { |
| times2++; |
| invalidList2.push(ele); |
| }, false); |
| } |
| }); |
| |
| test(function(){ |
| assert_false(fm1.checkValidity(), "The checkValidity method should be false."); |
| }, "If there is any invalid submittable element whose form owner is the form, the form.checkValidity must be false"); |
| |
| test(function(){ |
| assert_true("reportValidity" in fm1, "The reportValidity method is not supported"); |
| assert_false(fm1.reportValidity(), "The reportValidity method should be false."); |
| }, "If there is any invalid submittable element whose form owner is the form, the form.reportValidity must be false"); |
| |
| test(function(){ |
| assert_true(fm2.checkValidity(), "The checkValidity method should be true."); |
| }, "If all of the submittable elements whose form owner is the form are valid, the form.checkValidity must be true"); |
| |
| test(function(){ |
| assert_true("reportValidity" in fm2, "The reportValidity method is not supported."); |
| assert_true(fm2.reportValidity(), "The reportValidity method should be true."); |
| }, "If all of the submittable elements whose form owner is the form are valid, the form.reportValidity must be true"); |
| |
| test(function(){ |
| assert_false(fm3.checkValidity(), "The checkValidity method should be false."); |
| document.getElementById("fs").disabled = true; |
| assert_true(fm3.checkValidity(), "The checkValidity method should be true."); |
| |
| document.getElementById("inp1").value = "aaa"; |
| document.getElementById("inp1").type = "url"; |
| assert_false(fm3.checkValidity(), "The checkValidity method should be false."); |
| }, "Check the checkValidity method of the form element when it has a fieldset child"); |
| |
| test(function(){ |
| assert_true("reportValidity" in fm3, "The reportValidity method is not supported."); |
| assert_false(fm3.reportValidity(), "The reportValidity method should be false."); |
| document.getElementById("fs").disabled = true; |
| assert_true(fm3.reportValidity(), "The reportValidity method should be true."); |
| |
| document.getElementById("inp1").value = "aaa"; |
| document.getElementById("inp1").type = "url"; |
| assert_false(fm3.reportValidity(), "The reportValidity method should be false."); |
| }, "Check the reportValidity method of the form element when it has a fieldset child"); |
| |
| test(function () { |
| assert_equals(times1, 4, "The invalid event will be fired if the checkValidity or reportValidity method are called."); |
| assert_array_equals(invalidList1, [test1, test2, test1, test2], "The invalid event must be fired at the invalid control"); |
| assert_true(cancelable, "The invalid event is cancelable."); |
| }, "The invalid event must be fired at the invalid controls"); |
| |
| test(function () { |
| assert_equals(times2, 0, "The invalid event should not be fired, times should be 0."); |
| assert_array_equals(invalidList2, [], "The invalid event should not be fired, invalid list should be empty"); |
| }, "The invalid event must not be fired at the invalid controls"); |
| </script> |