select-validity.html (6613B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>HTMLSelectElement.checkValidity</title> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/forms.html#the-select-element:attr-select-required-4"> 5 <script src=/resources/testharness.js></script> 6 <script src=/resources/testharnessreport.js></script> 7 <div id=log></div> 8 <script> 9 10 test(function() { 11 var select = document.createElement('select'); 12 assert_true(select.willValidate, "A select element is a submittable element that is a candidate for constraint validation."); 13 var placeholder = document.createElement('option'); 14 select.appendChild(placeholder); 15 assert_true(select.checkValidity(), "Always valid when the select isn't a required value."); 16 select.required = true; 17 assert_true(placeholder.selected, "If display size is 1, multiple is absent and no options have selectedness true, the first option is selected."); 18 assert_equals(select.value, "", "The placeholder's value should be the select's value right now"); 19 assert_false(select.checkValidity(), "A selected placeholder option should invalidate the select."); 20 var emptyOption = document.createElement('option'); 21 select.appendChild(emptyOption); 22 emptyOption.selected = true; 23 assert_equals(select.value, "", "The empty value should be set."); 24 assert_true(select.checkValidity(), "An empty non-placeholder option should be a valid choice."); 25 var filledOption = document.createElement('option'); 26 filledOption.value = "test"; 27 select.appendChild(filledOption); 28 filledOption.selected = true; 29 assert_equals(select.value, "test", "The non-empty value should be set."); 30 assert_true(select.checkValidity(), "A non-empty non-placeholder option should be a valid choice."); 31 select.removeChild(placeholder); 32 select.appendChild(emptyOption); // move emptyOption to second place 33 emptyOption.selected = true; 34 assert_equals(select.value, "", "The empty value should be set."); 35 assert_true(select.checkValidity(), "Only the first option can be seen as a placeholder."); 36 placeholder.disabled = true; 37 select.insertBefore(placeholder, filledOption); 38 placeholder.selected = true; 39 assert_equals(select.value, "", "A disabled first placeholder option should result in an empty value."); 40 assert_false(select.checkValidity(), "A disabled first placeholder option should invalidate the select."); 41 }, "Placeholder label options within a select"); 42 43 test(function() { 44 var select = document.createElement('select'); 45 select.required = true; 46 var optgroup = document.createElement('optgroup'); 47 var emptyOption = document.createElement('option'); 48 optgroup.appendChild(emptyOption); 49 select.appendChild(optgroup); 50 emptyOption.selected = true; 51 assert_equals(select.value, "", "The empty value should be set."); 52 assert_true(select.checkValidity(), "The first option is not considered a placeholder if it is located within an optgroup."); 53 var otherEmptyOption = document.createElement('option'); 54 otherEmptyOption.value = ""; 55 select.appendChild(otherEmptyOption); 56 otherEmptyOption.selected = true; 57 assert_equals(select.value, "", "The empty value should be set."); 58 assert_true(select.checkValidity(), "The empty option should be accepted as it is not the first option in the tree ordered list."); 59 }, "Placeholder label-like options within optgroup"); 60 61 test(function() { 62 var select = document.createElement('select'); 63 select.required = true; 64 select.size = 2; 65 var emptyOption = document.createElement('option'); 66 select.appendChild(emptyOption); 67 assert_false(emptyOption.selected, "Display size is not 1, so the first option should not be selected."); 68 assert_false(select.checkValidity(), "If no options are selected the select must be seen as invalid."); 69 emptyOption.selected = true; 70 assert_true(select.checkValidity(), "If one option is selected, the select should be considered valid."); 71 var otherEmptyOption = document.createElement('option'); 72 otherEmptyOption.value = ""; 73 select.appendChild(otherEmptyOption); 74 otherEmptyOption.selected = true; 75 assert_false(emptyOption.selected, "Whenever an option has its selectiveness set to true, the other options must be set to false."); 76 otherEmptyOption.selected = false; 77 assert_false(otherEmptyOption.selected, "It should be possible to set the selectiveness to false with a display size more than one."); 78 assert_false(select.checkValidity(), "If no options are selected the select must be seen as invalid."); 79 }, "Validation on selects with display size set as more than one"); 80 81 test(function() { 82 var select = document.createElement('select'); 83 select.required = true; 84 select.multiple = true; 85 var emptyOption = document.createElement('option'); 86 select.appendChild(emptyOption); 87 assert_false(select.checkValidity(), "If no options are selected the select must be seen as invalid."); 88 emptyOption.selected = true; 89 assert_true(select.checkValidity(), "If one option is selected, the select should be considered valid."); 90 var optgroup = document.createElement('optgroup'); 91 optgroup.appendChild(emptyOption); // Move option to optgroup 92 select.appendChild(optgroup); 93 assert_true(select.checkValidity(), "If one option within an optgroup or not is selected, the select should be considered valid."); 94 }, "Validation on selects with multiple set"); 95 96 test(function() { 97 var select = document.createElement('select'); 98 select.required = true; 99 var option = document.createElement('option'); 100 option.value = 'test'; 101 option.disabled = true; 102 option.selected = true; 103 select.appendChild(option); 104 assert_true(select.checkValidity(), "When a required select has an option that is selected and disabled, the select should be considered valid."); 105 }, "Validation on selects with non-empty disabled option"); 106 107 test(function() { 108 var select = document.createElement('select'); 109 select.required = true; 110 var placeholder = document.createElement('option'); 111 select.appendChild(placeholder); 112 var nonPlaceholder = document.createElement('option'); 113 nonPlaceholder.textContent = "non-placeholder-option"; 114 select.appendChild(nonPlaceholder); 115 116 assert_false(select.checkValidity(), "If the placeholder label option is selected, required select element shouldn't be valid."); 117 placeholder.remove(); 118 assert_true(select.checkValidity(), "If the placeholder label option is removed, required select element should become valid."); 119 select.prepend(placeholder); 120 assert_false(select.checkValidity(), "If the placeholder label option is selected, required select element shouldn't be valid."); 121 122 }, "Remove and add back the placeholder label option"); 123 124 </script>