form-validation-validity-textarea-defaultValue.html (4530B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>textarea validation behavior</title> 4 <link rel="author" href="mailto:masonf@chromium.org"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/#suffering-from-being-too-short"> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 12 <textarea id=t1 minlength=5 required></textarea> 13 <textarea id=t2 minlength=5 required>a</textarea> 14 <textarea id=t3 required>a</textarea> 15 <textarea id=t4>a</textarea> 16 <script> 17 test(() => { 18 const emptyMinlength = document.getElementById('t1'); 19 const nonEmptyMinlength = document.getElementById('t2'); 20 const nonEmptyRequired = document.getElementById('t3'); 21 const nonEmptyNonRequired = document.getElementById('t4'); 22 assert_false(emptyMinlength.validity.valid,'Empty textareas with constraints will validate'); 23 assert_true(nonEmptyMinlength.validity.valid,'Non-empty textareas with constraints will *not* validate'); 24 assert_true(nonEmptyRequired.validity.valid,'Textareas without constraints will validate'); 25 assert_true(nonEmptyNonRequired.validity.valid,'Textareas without constraints will validate'); 26 [t1,t2,t3,t4].forEach(t => t.remove()); 27 },'Default validity based on emptiness'); 28 </script> 29 30 <textarea id=t5 minlength=5 required></textarea> 31 <script> 32 promise_test(async () => { 33 const textarea = document.getElementById('t5'); 34 document.querySelector('#t1'); 35 assert_false(textarea.validity.valid,'By default, this textarea will validate (and fail) because it started empty'); 36 textarea.defaultValue = 'abc'; 37 assert_true(textarea.validity.valid,'Programmatically setting defaultValue is not a user edit - automatically valid'); 38 textarea.replaceChildren('abcd'); 39 assert_true(textarea.validity.valid,'Programmatically replacing children is not a user edit - automatically valid'); 40 textarea.defaultValue = 'abcde'; 41 assert_true(textarea.validity.valid,'Still valid'); 42 textarea.remove(); 43 },'Setting textarea.defaultValue should not trigger validation'); 44 </script> 45 46 <textarea id=t6 minlength=5 required></textarea> 47 <script> 48 promise_test(async () => { 49 const textarea = document.getElementById('t6'); 50 assert_false(textarea.validity.valid,'By default, this textarea will validate (and fail) because it started empty'); 51 await test_driver.send_keys(textarea, "abc"); 52 assert_false(textarea.validity.valid,'Keystrokes should trigger validation, which will fail (length 3)'); 53 await test_driver.send_keys(textarea, "de"); 54 assert_equals(textarea.value,"abcde"); 55 assert_true(textarea.validity.valid,'Now valid'); 56 textarea.remove(); 57 },'User keystrokes should trigger validation'); 58 </script> 59 60 <textarea id=t7 minlength=5 required></textarea> 61 <script> 62 promise_test(async () => { 63 const textarea = document.getElementById('t7'); 64 textarea.addEventListener('input', (e) => { 65 e.target.defaultValue = e.target.value; 66 }); 67 assert_false(textarea.validity.valid,'By default, this textarea will validate (and fail) because it started empty'); 68 await test_driver.send_keys(textarea, "abc"); 69 assert_equals(textarea.value,"abc"); 70 assert_false(textarea.validity.valid,'Still invalid with 3 characters'); 71 await test_driver.send_keys(textarea, "de"); 72 assert_equals(textarea.value,"abcde"); 73 assert_true(textarea.validity.valid,'With 5 characters, now valid'); 74 textarea.remove(); 75 },'Setting textarea.defaultValue from the input event handler should trigger validation'); 76 </script> 77 78 <textarea id=t8 minlength=5 required></textarea> 79 <script> 80 promise_test(async () => { 81 const textarea = document.getElementById('t8'); 82 textarea.addEventListener('input', (e) => { 83 e.target.replaceChildren(e.target.value); 84 }); 85 assert_false(textarea.validity.valid,'By default, this textarea will validate (and fail) because it started empty'); 86 await test_driver.send_keys(textarea, "abc"); 87 assert_equals(textarea.value,"abc"); 88 assert_false(textarea.validity.valid,'Still invalid with 3 characters'); 89 await test_driver.send_keys(textarea, "de"); 90 assert_equals(textarea.value,"abcde"); 91 assert_true(textarea.validity.valid,'With 5 characters, now valid'); 92 textarea.remove(); 93 },'Calling textarea.replaceChildren() from the input event handler should trigger validation'); 94 </script> 95 96 <style> 97 :invalid { background-color: rgb(248, 203, 203); } 98 </style>