test_input_email.html (9287B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=555559 5 https://bugzilla.mozilla.org/show_bug.cgi?id=668817 6 https://bugzilla.mozilla.org/show_bug.cgi?id=854812 7 --> 8 <head> 9 <title>Test for <input type='email'> validity</title> 10 <script src="/tests/SimpleTest/SimpleTest.js"></script> 11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 12 </head> 13 <body> 14 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=555559">Mozilla Bug 555559</a> 15 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=668817">Mozilla Bug 668817</a> 16 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=854812">Mozilla Bug 854812</a> 17 <p id="display"></p> 18 <div id="content" style="display: none"> 19 <form> 20 <input type='email' name='email' id='i' oninvalid="invalidEventHandler(event);"> 21 <form> 22 </div> 23 <pre id="test"> 24 <script type="application/javascript"> 25 26 /** Test for <input type='email'> validity */ 27 28 var gInvalid = false; 29 30 function invalidEventHandler(e) 31 { 32 is(e.type, "invalid", "Invalid event type should be invalid"); 33 gInvalid = true; 34 } 35 36 function checkValidEmailAddress(element) 37 { 38 gInvalid = false; 39 ok(!element.validity.typeMismatch && !element.validity.badInput, 40 "Element should not suffer from type mismatch or bad input (with value='"+element.value+"')"); 41 ok(element.validity.valid, "Element should be valid"); 42 ok(element.checkValidity(), "Element should be valid"); 43 ok(!gInvalid, "The invalid event should not have been thrown"); 44 is(element.validationMessage, '', 45 "Validation message should be the empty string"); 46 ok(element.matches(":valid"), ":valid pseudo-class should apply"); 47 } 48 49 const VALID = 0; 50 const TYPE_MISMATCH = 1 << 0; 51 const BAD_INPUT = 1 << 1; 52 53 function checkInvalidEmailAddress(element, failedValidityStates) 54 { 55 info("Checking " + element.value); 56 gInvalid = false; 57 var expectTypeMismatch = !!(failedValidityStates & TYPE_MISMATCH); 58 var expectBadInput = !!(failedValidityStates & BAD_INPUT); 59 ok(element.validity.typeMismatch == expectTypeMismatch, 60 "Element should " + (expectTypeMismatch ? "" : "not ") + "suffer from type mismatch (with value='"+element.value+"')"); 61 ok(element.validity.badInput == expectBadInput, 62 "Element should " + (expectBadInput ? "" : "not ") + "suffer from bad input (with value='"+element.value+"')"); 63 ok(!element.validity.valid, "Element should not be valid"); 64 ok(!element.checkValidity(), "Element should not be valid"); 65 ok(gInvalid, "The invalid event should have been thrown"); 66 is(element.validationMessage, "Please enter an email address.", 67 "Validation message is not valid"); 68 ok(element.matches(":invalid"), ":invalid pseudo-class should apply"); 69 } 70 71 function testEmailAddress(aElement, aValue, aMultiple, aValidityFailures) 72 { 73 aElement.multiple = aMultiple; 74 aElement.value = aValue; 75 76 if (!aValidityFailures) { 77 checkValidEmailAddress(aElement); 78 } else { 79 checkInvalidEmailAddress(aElement, aValidityFailures); 80 } 81 } 82 83 var email = document.forms[0].elements[0]; 84 85 // Simple values, checking the e-mail syntax validity. 86 var values = [ 87 [ '' ], // The empty string shouldn't be considered as invalid. 88 [ 'foo@bar.com', VALID ], 89 [ ' foo@bar.com', VALID ], 90 [ 'foo@bar.com ', VALID ], 91 [ '\r\n foo@bar.com', VALID ], 92 [ 'foo@bar.com \n\r', VALID ], 93 [ '\n\n \r\rfoo@bar.com\n\n \r\r', VALID ], 94 [ '\n\r \n\rfoo@bar.com\n\r \n\r', VALID ], 95 [ 'tulip', TYPE_MISMATCH ], 96 // Some checks on the user part of the address. 97 [ '@bar.com', TYPE_MISMATCH ], 98 [ 'f\noo@bar.com', VALID ], 99 [ 'f\roo@bar.com', VALID ], 100 [ 'f\r\noo@bar.com', VALID ], 101 [ 'fü@foo.com', TYPE_MISMATCH ], 102 // Some checks for the domain part. 103 [ 'foo@bar', VALID ], 104 [ 'foo@b', VALID ], 105 [ 'foo@', TYPE_MISMATCH ], 106 [ 'foo@bar.', TYPE_MISMATCH ], 107 [ 'foo@foo.bar', VALID ], 108 [ 'foo@foo..bar', TYPE_MISMATCH ], 109 [ 'foo@.bar', TYPE_MISMATCH ], 110 [ 'foo@tulip.foo.bar', VALID ], 111 [ 'foo@tulip.foo-bar', VALID ], 112 [ 'foo@1.2', VALID ], 113 [ 'foo@127.0.0.1', VALID ], 114 [ 'foo@1.2.3', VALID ], 115 [ 'foo@b\nar.com', VALID ], 116 [ 'foo@b\rar.com', VALID ], 117 [ 'foo@b\r\nar.com', VALID ], 118 [ 'foo@.', TYPE_MISMATCH ], 119 [ 'foo@fü.com', VALID ], 120 [ 'foo@fu.cüm', VALID ], 121 [ 'thisUsernameIsLongerThanSixtyThreeCharactersInLengthRightAboutNow@mozilla.tld', VALID ], 122 // Long strings with UTF-8 in username. 123 [ 'this.is.email.should.be.longer.than.sixty.four.characters.föö@mözillä.tld', TYPE_MISMATCH ], 124 [ 'this-is-email-should-be-longer-than-sixty-four-characters-föö@mözillä.tld', TYPE_MISMATCH, true ], 125 // Long labels (labels greater than 63 chars long are not allowed). 126 [ 'foo@thislabelisexactly63characterssssssssssssssssssssssssssssssssss', VALID ], 127 [ 'foo@thislabelisexactly63characterssssssssssssssssssssssssssssssssss.com', VALID ], 128 [ 'foo@foo.thislabelisexactly63characterssssssssssssssssssssssssssssssssss.com', VALID ], 129 [ 'foo@foo.thislabelisexactly63characterssssssssssssssssssssssssssssssssss', VALID ], 130 [ 'foo@thislabelisexactly64charactersssssssssssssssssssssssssssssssssss', TYPE_MISMATCH | BAD_INPUT ], 131 [ 'foo@thislabelisexactly64charactersssssssssssssssssssssssssssssssssss.com', TYPE_MISMATCH | BAD_INPUT ], 132 [ 'foo@foo.thislabelisexactly64charactersssssssssssssssssssssssssssssssssss.com', TYPE_MISMATCH | BAD_INPUT ], 133 [ 'foo@foo.thislabelisexactly64charactersssssssssssssssssssssssssssssssssss', TYPE_MISMATCH | BAD_INPUT ], 134 // Long labels with UTF-8 (punycode encoding will increase the label to more than 63 chars). 135 [ 'foo@thisläbelisexäctly63charäcterssssssssssssssssssssssssssssssssss', TYPE_MISMATCH | BAD_INPUT ], 136 [ 'foo@thisläbelisexäctly63charäcterssssssssssssssssssssssssssssssssss.com', TYPE_MISMATCH | BAD_INPUT ], 137 [ 'foo@foo.thisläbelisexäctly63charäcterssssssssssssssssssssssssssssssssss.com', TYPE_MISMATCH | BAD_INPUT ], 138 [ 'foo@foo.thisläbelisexäctly63charäcterssssssssssssssssssssssssssssssssss', TYPE_MISMATCH | BAD_INPUT ], 139 // The domains labels (sub-domains or tld) can't start or finish with a '-' 140 [ 'foo@foo-bar', VALID ], 141 [ 'foo@-foo', TYPE_MISMATCH ], 142 [ 'foo@foo-.bar', TYPE_MISMATCH ], 143 [ 'foo@-.-', TYPE_MISMATCH ], 144 [ 'foo@fo-o.bar', VALID ], 145 [ 'foo@fo-o.-bar', TYPE_MISMATCH ], 146 [ 'foo@fo-o.bar-', TYPE_MISMATCH ], 147 [ 'foo@fo-o.-', TYPE_MISMATCH ], 148 [ 'foo@fo--o', VALID ], 149 ]; 150 151 // Multiple values, we don't check e-mail validity, only multiple stuff. 152 var multipleValues = [ 153 [ 'foo@bar.com, foo@bar.com', VALID ], 154 [ 'foo@bar.com,foo@bar.com', VALID ], 155 [ 'foo@bar.com,foo@bar.com,foo@bar.com', VALID ], 156 [ ' foo@bar.com , foo@bar.com ', VALID ], 157 [ '\tfoo@bar.com\t,\tfoo@bar.com\t', VALID ], 158 [ '\rfoo@bar.com\r,\rfoo@bar.com\r', VALID ], 159 [ '\nfoo@bar.com\n,\nfoo@bar.com\n', VALID ], 160 [ '\ffoo@bar.com\f,\ffoo@bar.com\f', VALID ], 161 [ '\t foo@bar.com\r,\nfoo@bar.com\f', VALID ], 162 [ 'foo@b,ar.com,foo@bar.com', TYPE_MISMATCH ], 163 [ 'foo@bar.com,foo@bar.com,', TYPE_MISMATCH ], 164 [ ' foo@bar.com , foo@bar.com , ', TYPE_MISMATCH ], 165 [ ',foo@bar.com,foo@bar.com', TYPE_MISMATCH ], 166 [ ',foo@bar.com,foo@bar.com', TYPE_MISMATCH ], 167 [ 'foo@bar.com,,,foo@bar.com', TYPE_MISMATCH ], 168 [ 'foo@bar.com;foo@bar.com', TYPE_MISMATCH ], 169 [ '<foo@bar.com>, <foo@bar.com>', TYPE_MISMATCH ], 170 [ 'foo@bar, foo@bar.com', VALID ], 171 [ 'foo@bar.com, foo', TYPE_MISMATCH ], 172 [ 'foo, foo@bar.com', TYPE_MISMATCH ], 173 ]; 174 175 /* Additional username checks. */ 176 177 var legalCharacters = "abcdefghijklmnopqrstuvwxyz"; 178 legalCharacters += "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 179 legalCharacters += "0123456789"; 180 legalCharacters += "!#$%&'*+-/=?^_`{|}~."; 181 182 // Add all username legal characters individually to the list. 183 for (c of legalCharacters) { 184 values.push([c + "@bar.com", VALID]); 185 } 186 // Add the concatenation of all legal characters too. 187 values.push([legalCharacters + "@bar.com", VALID]); 188 189 // Add username illegal characters, the same way. 190 var illegalCharacters = "()<>[]:;@\\, \t"; 191 for (c of illegalCharacters) { 192 values.push([illegalCharacters + "@bar.com", TYPE_MISMATCH]); 193 } 194 195 /* Additional domain checks. */ 196 197 legalCharacters = "abcdefghijklmnopqrstuvwxyz"; 198 legalCharacters += "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 199 legalCharacters += "0123456789"; 200 201 // Add domain legal characters (except '.' and '-' because they are special). 202 for (c of legalCharacters) { 203 values.push(["foo@foo.bar" + c, VALID]); 204 } 205 // Add the concatenation of all legal characters too. 206 values.push(["foo@bar." + legalCharacters, VALID]); 207 208 // Add domain illegal characters. 209 illegalCharacters = "()<>[]:;@\\,!#$%&'*+/=?^_`{|}~ \t"; 210 for (c of illegalCharacters) { 211 values.push(['foo@foo.ba' + c + 'r', TYPE_MISMATCH]); 212 } 213 214 values.forEach(function([value, valid, todo]) { 215 if (todo === true) { 216 email.value = value; 217 todo_is(email.validity.valid, true, "value should be valid"); 218 } else { 219 testEmailAddress(email, value, false, valid); 220 } 221 }); 222 223 multipleValues.forEach(function([value, valid]) { 224 testEmailAddress(email, value, true, valid); 225 }); 226 227 // Make sure setting multiple changes the value. 228 email.multiple = false; 229 email.value = "foo@bar.com, foo@bar.com"; 230 checkInvalidEmailAddress(email, TYPE_MISMATCH); 231 email.multiple = true; 232 checkValidEmailAddress(email); 233 234 </script> 235 </pre> 236 </body> 237 </html>