select-validity.tentative.html (3556B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <title>HTMLselectElement Test: validity</title> 4 <link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <select id="select1" required> 9 <option>one</option> 10 <option>two</option> 11 <option>three</option> 12 <option>four</option> 13 </select> 14 15 <form> 16 <select id="select2" required> 17 </select> 18 </form> 19 20 <style> 21 select, ::picker(select) { 22 appearance: base-select; 23 } 24 </style> 25 26 <script> 27 28 test(() => { 29 let select = document.createElement('select'); 30 assert_true(select.willValidate, "A select element is a submittable element that is a candidate for constraint validation."); 31 let option = document.createElement('option'); 32 select.appendChild(option); 33 assert_true(select.checkValidity(), "Always valid when the select isn't a required value."); 34 35 select.required = true; 36 assert_equals(select.value, ""); 37 assert_false(select.checkValidity(), "A selected placeholder option should invalidate the select."); 38 39 let emptyOption = document.createElement('option'); 40 select.appendChild(emptyOption); 41 assert_false(select.checkValidity(), "A selected placeholder option should invalidate the select even if there are multiple options."); 42 emptyOption.selected = true; 43 assert_true(select.checkValidity(), "An empty non-placeholder option should be a valid choice."); 44 45 let filledOption = document.createElement('option'); 46 filledOption.value = "test"; 47 select.appendChild(filledOption); 48 filledOption.selected = true; 49 assert_equals(select.value, "test", "The non-empty value should be set."); 50 assert_true(select.checkValidity(), "A non-empty non-placeholder option should be a valid choice."); 51 52 select.removeChild(option); 53 select.appendChild(emptyOption); 54 emptyOption.selected = true; 55 assert_equals(select.value, "", "The empty value should be set."); 56 assert_true(select.checkValidity(), "Only the first option can be seen as a placeholder."); 57 58 select.removeChild(filledOption); 59 assert_false(select.checkValidity(), "A selected placeholder option should invalidate the select."); 60 61 emptyOption.value = "test2"; 62 assert_equals(select.value, "test2"); 63 assert_true(select.checkValidity(), "A non-empty option value should be a valid choice."); 64 65 emptyOption.removeAttribute("value"); 66 assert_equals(select.value, ""); 67 assert_false(select.checkValidity()); 68 emptyOption.innerText = "test"; 69 assert_equals(select.value, "test"); 70 assert_true(select.checkValidity(), "A non-empty option should be a valid choice."); 71 72 const select1 = document.getElementById('select1'); 73 assert_equals(select1.value, "one"); 74 assert_true(select1.checkValidity(), "A select with non-empty placeholder option should be valid."); 75 }, "Validation for placeholder option"); 76 77 test(() => { 78 const select2 = document.getElementById('select2'); 79 assert_equals(select2.value, ""); 80 assert_false(select2.checkValidity()); 81 let form = document.querySelector('form'); 82 let invalidControl = form.querySelector('select:invalid'); 83 assert_equals(select2, invalidControl); 84 let didDispatchInvalid = false; 85 invalidControl.addEventListener('invalid', e => { didDispatchInvalid = true; }); 86 let didDispatchSubmit = false; 87 form.addEventListener('submit', event => { event.preventDefault(); didDispatchSubmit = true; }); 88 89 form.requestSubmit(); 90 assert_true(didDispatchInvalid); 91 assert_false(didDispatchSubmit); 92 }, "Check form not submitted for invalid select"); 93 94 </script>