This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.
Specification: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html Multipage: http://www.whatwg.org/C#the-textarea-element Complete: http://www.whatwg.org/c#the-textarea-element Comment: Allow textarea@pattern (input@pattern is specced already so why not) Posted from: 78.20.165.163 by mathias@qiwi.be User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/535.14 (KHTML, like Gecko) Chrome/18.0.975.0 Safari/535.14
Use cases for textarea@pattern: * Enforcing a minimum length. This is probably the most common use case, as pretty much any forum / bulletin board online already does this server-side and/or using JavaScript. * Tools like http://mothereff.in/ampersands, where the textarea’s text content is validated using a regular expression on-the-fly. Currently this is done separately in JavaScript (since I want to capture the validation errors) but it would be useful to have @pattern work for simple regex-based validation, just so the `invalid` event would fire and the invalid textarea could be targeted using `:invalid` in CSS. The heavier processing (i.e. matching the actual errors) could then be done only when needed. This would result in better performance for the common case where the input is valid. * Online editors that only allow a specific set of characters, or that disallow a range of characters.
Yes please. I just stumbled on this today and was surprised at the lack of @pattern on textareas. In my case, it's used for a setting where users enter a "template" (similar to the values that the CSS property grid-template accepts) to control the layout of panes. So I wanted to only allow certain letters and line breaks. My use case was quite specific, but I guess it's part of a more general category of entering structured data in textareas (any kind of regular language that can be matched by a regexp).
Single line patterns are very common. It's not clear that multiline text controls with patterns are anywhere near as common. Before we add this, we should see if authors end up using the validity API to do this in JS often enough to justify adding such a feature.
Pardon my ignorance, but what’s the harm in adding `textarea@pattern`? Several valid use cases have been presented in comment #1 and comment #2. FWIW, I just ran into some more cases where `textarea@pattern` would’ve been very welcome: * validating binary input in groups of 8 bits: `pattern="([01]{8})*"` * extended ASCII input: `pattern="[\x00-\xff]*"` I needed these for a purely client-side web app: http://mothereff.in/binary-ascii I ended up manually validating the value through JavaScript, adding `class=invalid` to <textarea>s with invalid input.
This bug was cloned to create bug 18069 as part of operation convergence.
Another use case: validating Base64-encoded input. http://mothereff.in/base64 As <textarea pattern> isn’t allowed/implemented, I ended up manually validating the value through JavaScript, adding `class=invalid` to <textarea>s with invalid input.
(In reply to comment #4) > Pardon my ignorance, but what’s the harm in adding `textarea@pattern`? The same harm as adding anything: http://wiki.whatwg.org/wiki/FAQ#Where.27s_the_harm_in_adding.E2.80.94 > Several valid use cases have been presented in comment #1 and comment #2. I'm not saying there's no use case, only that they aren't very common. We only just added single-line patterns. Let's see how much they are used, and how much people find they need multiline patterns. Also, note that some of those use cases might be best handled in other ways. For example, minimum length might best be handled by a minlength="" attribute. In the meantime, there is the setCustomValidity(message) API which gets you everything that a pattern="" attribute would get you, except for not working when scripts are disabled. I'll mark this LATER so we can investigate this again sometime next year.
Do we have any information on how authors are using <input pattern> yet?
Data set: http://webdevdata.org/ "The complete raw data from December 2012 (518 Mb). Consisting of 35,830 home pages from the top 50,000 most popular web sites." $ grep -aEo "<input\s+([^>]+\s)?pattern\s*=[^>]+>" data-all <input type="text" maxlength="50" id="site-search-field" name="search-field" class="text" placeholder="Search Products" required="required" pattern="^\u0020*([^\u0020]\u0020*)+$" /> <input id="email" class="txt" type="email" name="email" required="required" pattern="^\s*[\w\.-]+(\+[\w-]*)?@([\w-]+\.)+[\w-]+\s*$" /> <input id="pass" class="txt" type="password" name="password" required="required" pattern="^\s*.{6,}?\s*$" /> <input type="text" id="anf_user_registration_form_firstname" name="anf_user_registration_form[firstname]" required="required" maxlength="64" pattern=".{2,}" placeholder="Name"/> <input id="pass" class="txt" type="password" name="password" required="required" pattern="^\s*.{6,}?\s*$"> <input id="email" class="txt" type="email" name="email" required="required" pattern="^\s*[\w\.-]+(\+[\w-]*)?@([\w-]+\.)+[\w-]+\s*$" /> <input id="pass" class="txt" type="password" name="password" required="required" pattern="^\s*.{6,}?\s*$" /> <input name="phone" id="phone" maxlength="14" type="tel" class="txt_mt10 txt_mb1" pattern="^[0-9 ]+$" speech required x-webkit-speech /> <input type="text" name="account" title="Employee Account" id="firefly-login-account" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="account" title="Employee Account" id="firefly-login-account-register" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="first_name" id="firefly-register-name-first" title="First Name" placeholder="First name" maxlength="15" required pattern="^\D{1,15}$"> <input type="text" name="last_name" id="firefly-register-name-last" title="Last Name" placeholder="Last name" maxlength="20" required pattern="^\D{1,20}$"> <input type="text" name="birth_year" maxlength="4" title="Birth year" placeholder="Enter year" required pattern="\d{4}"> <input type="text" name="zip_code" id="firefly-register-zip" maxlength="10" title="Zip Code" placeholder="Enter zip" required pattern="\d{5}([\-]\d{4})?"> <input type="email" name="email" id="firefly-register-email" title="Email" placeholder="email@example.com" required pattern=".+@.+\..+"> <input type="email" id="firefly-register-email-confirm" title="Email Confirmation" class="confirmation" autocomplete="off" placeholder="Confirm email" required pattern=".+@.+\..+"> <input type="password" name="password" id="firefly-register-password" title="Password" autocomplete="off" maxlength="30" placeholder="5-30 letters/numbers" pattern="[a-zA-Z0-9]{5,30}" required> <input type="password" id="firefly-register-password-confirm" title="Password Confirmation" maxlength="30" class="confirmation" autocomplete="off" placeholder="Confirm password" pattern="[a-zA-Z0-9]{5,30}" required> <input id="email" class="txt" type="email" name="email" required="required" pattern="^\s*[\w\.-]+(\+[\w-]*)?@([\w-]+\.)+[\w-]+\s*$" /> <input id="pass" class="txt" type="password" name="password" required="required" pattern="^\s*.{6,}?\s*$" /> <input type="text" name="zip" value="" id="hero_zip" required pattern="[\d]{5}(-[\d]{4})?" placeholder="ZIP"> <input type="text" name="account" title="Employee Account" id="firefly-login-account" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="account" title="Employee Account" id="firefly-login-account-register" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="first_name" id="firefly-register-name-first" title="First Name" placeholder="First name" maxlength="15" required pattern="^\D{1,15}$"> <input type="text" name="last_name" id="firefly-register-name-last" title="Last Name" placeholder="Last name" maxlength="20" required pattern="^\D{1,20}$"> <input type="text" name="birth_year" maxlength="4" title="Birth year" placeholder="Enter year" required pattern="\d{4}"> <input type="text" name="zip_code" id="firefly-register-zip" maxlength="10" title="Zip Code" placeholder="Enter zip" required pattern="\d{5}([\-]\d{4})?"> <input type="email" name="email" id="firefly-register-email" title="Email" placeholder="email@example.com" required pattern=".+@.+\..+"> <input type="email" id="firefly-register-email-confirm" title="Email Confirmation" class="confirmation" autocomplete="off" placeholder="Confirm email" required pattern=".+@.+\..+"> <input type="password" name="password" id="firefly-register-password" title="Password" autocomplete="off" maxlength="30" placeholder="5-30 letters/numbers" pattern="[a-zA-Z0-9]{5,30}" required> <input type="password" id="firefly-register-password-confirm" title="Password Confirmation" maxlength="30" class="confirmation" autocomplete="off" placeholder="Confirm password" pattern="[a-zA-Z0-9]{5,30}" required> <input type="text" name="account" title="Employee Account" id="firefly-login-account" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="account" title="Employee Account" id="firefly-login-account-register" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="first_name" id="firefly-register-name-first" title="First Name" placeholder="First name" maxlength="15" required pattern="^\D{1,15}$"> <input type="text" name="last_name" id="firefly-register-name-last" title="Last Name" placeholder="Last name" maxlength="20" required pattern="^\D{1,20}$"> <input type="text" name="birth_year" maxlength="4" title="Birth year" placeholder="Enter year" required pattern="\d{4}"> <input type="text" name="zip_code" id="firefly-register-zip" maxlength="10" title="Zip Code" placeholder="Enter zip" required pattern="\d{5}([\-]\d{4})?"> <input type="email" name="email" id="firefly-register-email" title="Email" placeholder="email@example.com" required pattern=".+@.+\..+"> <input type="email" id="firefly-register-email-confirm" title="Email Confirmation" class="confirmation" autocomplete="off" placeholder="Confirm email" required pattern=".+@.+\..+"> <input type="password" name="password" id="firefly-register-password" title="Password" autocomplete="off" maxlength="30" placeholder="5-30 letters/numbers" pattern="[a-zA-Z0-9]{5,30}" required> <input type="password" id="firefly-register-password-confirm" title="Password Confirmation" maxlength="30" class="confirmation" autocomplete="off" placeholder="Confirm password" pattern="[a-zA-Z0-9]{5,30}" required> <input type="text" name="account" title="Employee Account" id="firefly-login-account" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="account" title="Employee Account" id="firefly-login-account-register" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="first_name" id="firefly-register-name-first" title="First Name" placeholder="First name" maxlength="15" required pattern="^\D{1,15}$"> <input type="text" name="last_name" id="firefly-register-name-last" title="Last Name" placeholder="Last name" maxlength="20" required pattern="^\D{1,20}$"> <input type="text" name="birth_year" maxlength="4" title="Birth year" placeholder="Enter year" required pattern="\d{4}"> <input type="text" name="zip_code" id="firefly-register-zip" maxlength="10" title="Zip Code" placeholder="Enter zip" required pattern="\d{5}([\-]\d{4})?"> <input type="email" name="email" id="firefly-register-email" title="Email" placeholder="email@example.com" required pattern=".+@.+\..+"> <input type="email" id="firefly-register-email-confirm" title="Email Confirmation" class="confirmation" autocomplete="off" placeholder="Confirm email" required pattern=".+@.+\..+"> <input type="password" name="password" id="firefly-register-password" title="Password" autocomplete="off" maxlength="30" placeholder="5-30 letters/numbers" pattern="[a-zA-Z0-9]{5,30}" required> <input type="password" id="firefly-register-password-confirm" title="Password Confirmation" maxlength="30" class="confirmation" autocomplete="off" placeholder="Confirm password" pattern="[a-zA-Z0-9]{5,30}" required> <input type="text" name="account" title="Employee Account" id="firefly-login-account" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="account" title="Employee Account" id="firefly-login-account-register" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="first_name" id="firefly-register-name-first" title="First Name" placeholder="First name" maxlength="15" required pattern="^\D{1,15}$"> <input type="text" name="last_name" id="firefly-register-name-last" title="Last Name" placeholder="Last name" maxlength="20" required pattern="^\D{1,20}$"> <input type="text" name="birth_year" maxlength="4" title="Birth year" placeholder="Enter year" required pattern="\d{4}"> <input type="text" name="zip_code" id="firefly-register-zip" maxlength="10" title="Zip Code" placeholder="Enter zip" required pattern="\d{5}([\-]\d{4})?"> <input type="email" name="email" id="firefly-register-email" title="Email" placeholder="email@example.com" required pattern=".+@.+\..+"> <input type="email" id="firefly-register-email-confirm" title="Email Confirmation" class="confirmation" autocomplete="off" placeholder="Confirm email" required pattern=".+@.+\..+"> <input type="password" name="password" id="firefly-register-password" title="Password" autocomplete="off" maxlength="30" placeholder="5-30 letters/numbers" pattern="[a-zA-Z0-9]{5,30}" required> <input type="password" id="firefly-register-password-confirm" title="Password Confirmation" maxlength="30" class="confirmation" autocomplete="off" placeholder="Confirm password" pattern="[a-zA-Z0-9]{5,30}" required> <input type="text" name="account" title="Employee Account" id="firefly-login-account" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="account" title="Employee Account" id="firefly-login-account-register" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="first_name" id="firefly-register-name-first" title="First Name" placeholder="First name" maxlength="15" required pattern="^\D{1,15}$"> <input type="text" name="last_name" id="firefly-register-name-last" title="Last Name" placeholder="Last name" maxlength="20" required pattern="^\D{1,20}$"> <input type="text" name="birth_year" maxlength="4" title="Birth year" placeholder="Enter year" required pattern="\d{4}"> <input type="text" name="zip_code" id="firefly-register-zip" maxlength="10" title="Zip Code" placeholder="Enter zip" required pattern="\d{5}([\-]\d{4})?"> <input type="email" name="email" id="firefly-register-email" title="Email" placeholder="email@example.com" required pattern=".+@.+\..+"> <input type="email" id="firefly-register-email-confirm" title="Email Confirmation" class="confirmation" autocomplete="off" placeholder="Confirm email" required pattern=".+@.+\..+"> <input type="password" name="password" id="firefly-register-password" title="Password" autocomplete="off" maxlength="30" placeholder="5-30 letters/numbers" pattern="[a-zA-Z0-9]{5,30}" required> <input type="password" id="firefly-register-password-confirm" title="Password Confirmation" maxlength="30" class="confirmation" autocomplete="off" placeholder="Confirm password" pattern="[a-zA-Z0-9]{5,30}" required> <input type="email" required="required" id="register_email" name="register_email" autocomplete="off" email-extra="true" pattern="([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+"/> <input type="email" required="required" id="resend_email_input" name="resend_email_input" autocomplete="off" email-extra="true" pattern="([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+"/> <input type="email" required="required" id="register_email" name="register_email" autocomplete="off" email-extra="true" pattern="([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+"/> <input type="email" required="required" id="resend_email_input" name="resend_email_input" autocomplete="off" email-extra="true" pattern="([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+"/> <input type="text" name="account" title="Employee Account" id="firefly-login-account" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="account" title="Employee Account" id="firefly-login-account-register" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="first_name" id="firefly-register-name-first" title="First Name" placeholder="First name" maxlength="15" required pattern="^\D{1,15}$"> <input type="text" name="last_name" id="firefly-register-name-last" title="Last Name" placeholder="Last name" maxlength="20" required pattern="^\D{1,20}$"> <input type="text" name="birth_year" maxlength="4" title="Birth year" placeholder="Enter year" required pattern="\d{4}"> <input type="text" name="zip_code" id="firefly-register-zip" maxlength="10" title="Zip Code" placeholder="Enter zip" required pattern="\d{5}([\-]\d{4})?"> <input type="email" name="email" id="firefly-register-email" title="Email" placeholder="email@example.com" required pattern=".+@.+\..+"> <input type="email" id="firefly-register-email-confirm" title="Email Confirmation" class="confirmation" autocomplete="off" placeholder="Confirm email" required pattern=".+@.+\..+"> <input type="password" name="password" id="firefly-register-password" title="Password" autocomplete="off" maxlength="30" placeholder="5-30 letters/numbers" pattern="[a-zA-Z0-9]{5,30}" required> <input type="password" id="firefly-register-password-confirm" title="Password Confirmation" maxlength="30" class="confirmation" autocomplete="off" placeholder="Confirm password" pattern="[a-zA-Z0-9]{5,30}" required> <input type="text" pattern="[0-9]{5}" title="Zip code" id="zipcode" name="zipcode" size="10" tabindex="10" value=""/> <input type="text" maxlength="50" id="site-search-field" name="search-field" class="text" placeholder="Search Products" required="required" pattern="^\u0020*([^\u0020]\u0020*)+$" /> <input type="text" name="account" title="Employee Account" id="firefly-login-account" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="account" title="Employee Account" id="firefly-login-account-register" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="first_name" id="firefly-register-name-first" title="First Name" placeholder="First name" maxlength="15" required pattern="^\D{1,15}$"> <input type="text" name="last_name" id="firefly-register-name-last" title="Last Name" placeholder="Last name" maxlength="20" required pattern="^\D{1,20}$"> <input type="text" name="birth_year" maxlength="4" title="Birth year" placeholder="Enter year" required pattern="\d{4}"> <input type="text" name="zip_code" id="firefly-register-zip" maxlength="10" title="Zip Code" placeholder="Enter zip" required pattern="\d{5}([\-]\d{4})?"> <input type="email" name="email" id="firefly-register-email" title="Email" placeholder="email@example.com" required pattern=".+@.+\..+"> <input type="email" id="firefly-register-email-confirm" title="Email Confirmation" class="confirmation" autocomplete="off" placeholder="Confirm email" required pattern=".+@.+\..+"> <input type="password" name="password" id="firefly-register-password" title="Password" autocomplete="off" maxlength="30" placeholder="5-30 letters/numbers" pattern="[a-zA-Z0-9]{5,30}" required> <input type="password" id="firefly-register-password-confirm" title="Password Confirmation" maxlength="30" class="confirmation" autocomplete="off" placeholder="Confirm password" pattern="[a-zA-Z0-9]{5,30}" required> <input type="text" name="zip" class="input-zip" placeholder="Zip" pattern="^[\d]{5}(-[\d]{4})?$" required="required" /> <input type="text" name="zip" class="input-zip" placeholder="Zip" pattern="^[\d]{5}(-[\d]{4})?$" required="required" /> <input type="text" data-required="mail email" data-shown="mail email" maxlength="5" name="customer.address.zipcode" pattern="\d{5}" /> <input type="password" tabindex="3" name="password" autocomplete="off" required="true" value="" id="password" maxlength="100" class="x-large" pattern=".{6,100}" data-label="Password" data-message="must be at least 6 characters" title="Password should be a minimum of 6 characters. Numbers and special characters make it extra safe." /> <input class="legible fixed-width two skip-prefix-2 text" name="{{ service.toLowerCase() }}[amount]" id="recharge_amount" type="text" pattern="\d*"> <input class="legible fixed-width quarter skip-prefix-3 tel" type="tel" name="mobile[connection]" id="mobile_number" pattern="([-\s]*(0))?[-\s]*[1-9]([\s-]*[0-9]){9}"> <input class="legible fixed-width two skip-prefix-2 text" name="mobile[amount]" id="mobile_amount" type="text" pattern="\d*"> <input class="occupy legible fixed-width skip-prefix-2 text" type="text" name="dth[amount]" id="dth_amount" pattern="\d*"> <input class="legible fixed-width quarter skip-prefix-3 tel" type="tel" name="data[connection]" id="datacard_number" pattern="([-\s]*(0))?[-\s]*[1-9]([\s-]*[0-9]){9}"> <input class="legible fixed-width two skip-prefix-2 text" name="data[amount]" id="datacard_amount" type="text" pattern="\d*"> <input class="occupy legible fixed-width skip-prefix-2 text" type="text" name="biller[amount]" id="biller_amount" pattern="\d*"> <input class="occupy legible fixed-width text" type="password" name="creditcard[cvv]" id="cc_cvv" pattern="\d*" autocomplete="off"> <input class="occupy legible fixed-width skip-prefix-3 tel" type="tel" name="mobile[connection]" id="sms_signup_mobile" pattern="([-\s]*(0))?[-\s]*[1-9]([\s-]*[0-9]){9}"> <input class="occupy legible fixed-width skip-prefix-3 tel" type="tel" name="mobile[connection]" id="ivr_signup_mobile" pattern="([-\s]*(0))?[-\s]*[1-9]([\s-]*[0-9]){9}"> <input type="text" name="account" title="Employee Account" id="firefly-login-account" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="account" title="Employee Account" id="firefly-login-account-register" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="first_name" id="firefly-register-name-first" title="First Name" placeholder="First name" maxlength="15" required pattern="^\D{1,15}$"> <input type="text" name="last_name" id="firefly-register-name-last" title="Last Name" placeholder="Last name" maxlength="20" required pattern="^\D{1,20}$"> <input type="text" name="birth_year" maxlength="4" title="Birth year" placeholder="Enter year" required pattern="\d{4}"> <input type="text" name="zip_code" id="firefly-register-zip" maxlength="10" title="Zip Code" placeholder="Enter zip" required pattern="\d{5}([\-]\d{4})?"> <input type="email" name="email" id="firefly-register-email" title="Email" placeholder="email@example.com" required pattern=".+@.+\..+"> <input type="email" id="firefly-register-email-confirm" title="Email Confirmation" class="confirmation" autocomplete="off" placeholder="Confirm email" required pattern=".+@.+\..+"> <input type="password" name="password" id="firefly-register-password" title="Password" autocomplete="off" maxlength="30" placeholder="5-30 letters/numbers" pattern="[a-zA-Z0-9]{5,30}" required> <input type="password" id="firefly-register-password-confirm" title="Password Confirmation" maxlength="30" class="confirmation" autocomplete="off" placeholder="Confirm password" pattern="[a-zA-Z0-9]{5,30}" required> <input pattern="[A-Za-z]" value="Быстрый поиск" class="stdt_input" style="width:155px;" type="text" id="filter" name="filter" /> <input name="r_username_sn" type="text" placeholder="Username" spellcheck="false" required="" title="Username must be 2-20 characters comprising of ( a-Z 0-9 - _ . ) and must start with a letter." pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$" id="username" /> <input name="passphrase" type="text" placeholder="Pass" id="passphrase" spellcheck="false" title="Passphrase must contain only characters and numbers" pattern="[a-zA-Z0-9]{4}" /> <input type="text" id="sn" name="sn" size="18" spellcheck="false" required="" title="Username must be 2-20 characters comprising of ( a-Z 0-9 - _ . ) and must start with a letter." pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$" > <input name="r_text_fname" type="text" value="" size="25" required title="First name can only contain letters and/or a dash" required pattern="[a-z A-Z\-]+" > <input name="r_text_lname" type="text" value="" size="25" required title="Last Name can only contain letters, a space and/or a dash" required pattern="[a-z A-Z\-]+" > <input name="r_text_companyname" type="text" value="" size="25" required title="Company name can only contain ( a-Z 0-9 _-&./# )" required pattern="[a-z A-Z0-9-_\&\.\#\/]+" > <input name="r_username_sn" type="text" value="" size="25" maxlength="40 required "title="User name must be 2-20 characters comprising of ( a-Z 0-9 - _ . ) and must start with a letter." pattern="^[a-zA-Z][a-zA-Z0-9\-\_\.]{1,20}$" > <input name="r_password_pw1" type="password" value="" size="25" required title="Password must be at least 5 characters and can only contain ( a-Z 0-9 !@#$%^&*()_+-=\)" pattern="(?=^.{5,}$)[a-zA-z0-9-_\!\@\#\$\%\^\&\*\(\)\=\+]+" > <input name="r_password_pw2" type="password" value="" size="25" required title="Password must be at least 5 characters and can only contain ( a-Z 0-9 !@#$%^&*()_+-=\)" pattern="(?=^.{5,}$)[a-zA-z0-9-_\!\@\#\$\%\^\&\*\(\)\=\+]+" > <input name="r_email_email1" type="email" value="" size="25" required title="Please enter a valid email in the form user@domain.com" pattern="(?=.+\@.+\.\w+)[a-zA-Z0-9\!\@\#\$\%\&\'\*\+\-\/\=\?\.\_]+"> <input name="r_phone_phone" type="tel" spellcheck="false" value="" size="25" required title="Please enter a valid phone number (min 10 digits), in a format similar to +99 999-999-9999" pattern="[0-9xX\#\-\(\)\. \+]{10,}$" > <input name="r_url_website" type="text" value="" size="25" required title="Please enter a valid website, can only contain [a-Z 0-9 :/.]" pattern="(?=.+\..+)[a-zA-Z0-9\:\/\.]+" > <input type="text" name="username" id="username" required pattern="^[a-zA-Z][a-zA-Z0-9]{3,16}$" title="Your username must be between 3 and 16 alpha numeric characters" maxlength="16" class="inputb" onblur="javascript:CheckUserName();" placeholder="BeerName00" > <input type="text" name="account" title="Employee Account" id="firefly-login-account" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="account" title="Employee Account" id="firefly-login-account-register" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="first_name" id="firefly-register-name-first" title="First Name" placeholder="First name" maxlength="15" required pattern="^\D{1,15}$"> <input type="text" name="last_name" id="firefly-register-name-last" title="Last Name" placeholder="Last name" maxlength="20" required pattern="^\D{1,20}$"> <input type="text" name="birth_year" maxlength="4" title="Birth year" placeholder="Enter year" required pattern="\d{4}"> <input type="text" name="zip_code" id="firefly-register-zip" maxlength="10" title="Zip Code" placeholder="Enter zip" required pattern="\d{5}([\-]\d{4})?"> <input type="email" name="email" id="firefly-register-email" title="Email" placeholder="email@example.com" required pattern=".+@.+\..+"> <input type="email" id="firefly-register-email-confirm" title="Email Confirmation" class="confirmation" autocomplete="off" placeholder="Confirm email" required pattern=".+@.+\..+"> <input type="password" name="password" id="firefly-register-password" title="Password" autocomplete="off" maxlength="30" placeholder="5-30 letters/numbers" pattern="[a-zA-Z0-9]{5,30}" required> <input type="password" id="firefly-register-password-confirm" title="Password Confirmation" maxlength="30" class="confirmation" autocomplete="off" placeholder="Confirm password" pattern="[a-zA-Z0-9]{5,30}" required> <input id="email" class="txt" type="email" name="email" required="required" pattern="^\s*[\w\.-]+(\+[\w-]*)?@([\w-]+\.)+[\w-]+\s*$" /> <input id="pass" class="txt" type="password" name="password" required="required" pattern="^\s*.{6,}?\s*$" /> <input type="text" name="word" placeholder="search..." required="required" pattern=".{3,}?" /> <input type="number" id="uses" name="uses" min="0" max="100000" step="10" placeholder="Uses" pattern="[0-9]" value=""/> <input value="" type="text" class="view-cart-coupon-code" id="coupon-code" name="coupon_code" pattern="^((\d{4}-){3}\d{4})$" required="required"> <input type="email" id="email" class="textfield email required" name="email" placeholder="e-mailadres" pattern="^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$" title="" /> <input id="df-zipcode" class="df-input df-input75" type="text" pattern="[0-9]{5,}" data-message="Ange postnummer med 5 siffror utan mellanslag" maxlength="5" /> <input type="text" name="account" title="Employee Account" id="firefly-login-account" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="account" title="Employee Account" id="firefly-login-account-register" maxlength="50" placeholder="DOMAIN\username" pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required disabled> <input type="text" name="first_name" id="firefly-register-name-first" title="First Name" placeholder="First name" maxlength="15" required pattern="^\D{1,15}$"> <input type="text" name="last_name" id="firefly-register-name-last" title="Last Name" placeholder="Last name" maxlength="20" required pattern="^\D{1,20}$"> <input type="text" name="birth_year" maxlength="4" title="Birth year" placeholder="Enter year" required pattern="\d{4}"> <input type="text" name="zip_code" id="firefly-register-zip" maxlength="10" title="Zip Code" placeholder="Enter zip" required pattern="\d{5}([\-]\d{4})?"> <input type="email" name="email" id="firefly-register-email" title="Email" placeholder="email@example.com" required pattern=".+@.+\..+"> <input type="email" id="firefly-register-email-confirm" title="Email Confirmation" class="confirmation" autocomplete="off" placeholder="Confirm email" required pattern=".+@.+\..+"> <input type="password" name="password" id="firefly-register-password" title="Password" autocomplete="off" maxlength="30" placeholder="5-30 letters/numbers" pattern="[a-zA-Z0-9]{5,30}" required> <input type="password" id="firefly-register-password-confirm" title="Password Confirmation" maxlength="30" class="confirmation" autocomplete="off" placeholder="Confirm password" pattern="[a-zA-Z0-9]{5,30}" required> <input onchange="if(this.value != '' && !this.value.match(/^http/)) alert('Error - the website address needs to start with http');" id="field_website" type="url" pattern="^http.*" size="48" name="website" value="" placeholder="http://"> <input id="captcha_code" type="text" required pattern="\d{5}" name="captcha" size="6" maxlength="5" onkeyup="this.value = this.value.replace(/[^\d]+/g, '');"> <input name="zipCode" type="text" pattern="[0-9]*" class="search-zipcode" placeholder="ZIP code" autocomplete="off" tabindex="201" /> <input placeholder=yyyy type=text onfocus="ifc(this,'y')" pattern="[0-9]*" maxlength=4 size=9 id=boxyear name=year title="Enter year as a 4-digit number." value=2012> <input type="text" pattern="[0-9.]+" name="phone_no" id="phone_no" class="numeric" class="required phone"> <input type="text" maxlength="50" id="site-search-field" name="search-field" class="text" placeholder="Search Products" required="required" pattern="^\u0020*([^\u0020]\u0020*)+$" /> <input type="text" maxlength="50" id="site-search-field" name="search-field" class="text" placeholder="Search Products" required="required" pattern="^\u0020*([^\u0020]\u0020*)+$" /> <input type="text" id="contact_phone" name="contact[phone]" class="text" value="" required="" pattern="\(?0( *\d\)?){9,10}" data-message="Please enter a valid phone number" />
Sorted by duplicate count with similar cases grouped: > 11 <input type="text" name="zip_code" id="firefly-register-zip" > maxlength="10" title="Zip Code" placeholder="Enter zip" required > pattern="\d{5}([\-]\d{4})?"> > 1 <input value="" type="text" class="view-cart-coupon-code" > id="coupon-code" name="coupon_code" > pattern="^((\d{4}-){3}\d{4})$" required="required"> > 1 <input type="text" pattern="[0-9]{5}" title="Zip code" > id="zipcode" name="zipcode" size="10" tabindex="10" value=""/> > 1 <input type="text" name="zip" value="" id="hero_zip" required > pattern="[\d]{5}(-[\d]{4})?" placeholder="ZIP"> > 1 <input type="text" name="zip" class="input-zip" > placeholder="Zip" pattern="^[\d]{5}(-[\d]{4})?$" > required="required" /> > 1 <input type="text" name="zip" class="input-zip" > placeholder="Zip" pattern="^[\d]{5}(-[\d]{4})?$" > required="required" /> Good uses: getting data (ZIP code, coupon code) that comes in a particular standard form. > 11 <input type="text" name="last_name" > id="firefly-register-name-last" title="Last Name" > placeholder="Last name" maxlength="20" required > pattern="^\D{1,20}$"> > 11 <input type="text" name="first_name" > id="firefly-register-name-first" title="First Name" > placeholder="First name" maxlength="15" required > pattern="^\D{1,15}$"> "Non-numeric input". Probably not reasonable in this case; what if someone has a digit in their name? Or has a name greater than 20 characters? > 11 <input type="text" name="birth_year" maxlength="4" title="Birth > year" placeholder="Enter year" required pattern="\d{4}"> > 1 <input placeholder=yyyy type=text onfocus="ifc(this,'y')" > pattern="[0-9]*" maxlength=4 size=9 id=boxyear name=year > title="Enter year as a 4-digit number." value=2012> We don't have a good control to get a year, but maybe type=number would be better? > 11 <input type="text" name="account" title="Employee Account" > id="firefly-login-account-register" maxlength="50" > placeholder="DOMAIN\username" > pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required > disabled> > 11 <input type="text" name="account" title="Employee Account" > id="firefly-login-account" maxlength="50" > placeholder="DOMAIN\username" > pattern="^[a-zA-Z]+\\[^"\\\[\]:;|=,+*?<>]+$" required > disabled> Probably a good use. > 11 <input type="password" name="password" > id="firefly-register-password" title="Password" > autocomplete="off" maxlength="30" placeholder="5-30 > letters/numbers" pattern="[a-zA-Z0-9]{5,30}" required> > 11 <input type="password" id="firefly-register-password-confirm" > title="Password Confirmation" maxlength="30" > class="confirmation" autocomplete="off" placeholder="Confirm > password" pattern="[a-zA-Z0-9]{5,30}" required> > 1 <input name="r_password_pw2" type="password" value="" size="25" > required title="Password must be at least 5 characters and can > only contain ( a-Z 0-9 !@#$%^&*()_+-=\)" > pattern="(?=^.{5,}$)[a-zA-z0-9-_\!\@\#\$\%\^\&\*\(\)\=\+]+" > > 1 <input name="r_password_pw1" type="password" value="" size="25" > required title="Password must be at least 5 characters and can > only contain ( a-Z 0-9 !@#$%^&*()_+-=\)" > pattern="(?=^.{5,}$)[a-zA-z0-9-_\!\@\#\$\%\^\&\*\(\)\=\+]+" > Partly minlength (bug 10053), partly a good use. The second (password confirmation) doesn't really need the pattern, and should probably use setCustomValidity() to report if they match. Not really clear why the bottom two care so much about what characters a pass¡word has. > 11 <input type="email" name="email" id="firefly-register-email" > title="Email" placeholder="email@example.com" required > pattern=".+@.+\..+"> > 11 <input type="email" id="firefly-register-email-confirm" > title="Email Confirmation" class="confirmation" > autocomplete="off" placeholder="Confirm email" required > pattern=".+@.+\..+"> > 4 <input id="email" class="txt" type="email" name="email" > required="required" > pattern="^\s*[\w\.-]+(\+[\w-]*)?@([\w-]+\.)+[\w-]+\s*$" /> > 2 <input type="email" required="required" id="resend_email_input" > name="resend_email_input" autocomplete="off" email-extra="true" > pattern="([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4}) > +"/> > 2 <input type="email" required="required" id="register_email" > name="register_email" autocomplete="off" email-extra="true" > pattern="([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4}) > +"/> > 1 <input type="email" id="email" class="textfield email required" > name="email" placeholder="e-mailadres" > pattern="^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2 > ,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$" title="" /> > 1 <input name="r_email_email1" type="email" value="" size="25" > required title="Please enter a valid email in the form > user@domain.com" > pattern="(?=.+\@.+\.\w+)[a-zA-Z0-9\!\@\#\$\%\&\'\*\+\-\/\=\?\.\_ > ]+"> Not sure what they're trying to do here. type=email should do all this for them, no? Maybe we should disallow pattern="" for type=email? None of the uses in this data set for type=email were the use cases for which we allows pattern="" (namely, to limit e-mail addresses to specific hostnames, e.g. ".+@harvard.edu"). > 4 <input type="text" maxlength="50" id="site-search-field" > name="search-field" class="text" placeholder="Search Products" > required="required" pattern="^\u0020*([^\u0020]\u0020*)+$" /> trim (bug 17972) > 4 <input id="pass" class="txt" type="password" name="password" > required="required" pattern="^\s*.{6,}?\s*$" /> > 1 <input type="text" name="word" placeholder="search..." > required="required" pattern=".{3,}?" /> > 1 <input type="text" id="anf_user_registration_form_firstname" > name="anf_user_registration_form[firstname]" required="required" > maxlength="64" pattern=".{2,}" placeholder="Name"/> > 1 <input type="password" tabindex="3" name="password" > autocomplete="off" required="true" value="" id="password" > maxlength="100" class="x-large" pattern=".{6,100}" > data-label="Password" data-message="must be at least 6 > characters" title="Password should be a minimum of 6 characters. > Numbers and special characters make it extra safe." /> > 1 <input id="pass" class="txt" type="password" name="password" > required="required" pattern="^\s*.{6,}?\s*$"> minlength (bug 10053) > 1 <input type="text" pattern="[0-9.]+" name="phone_no" > id="phone_no" class="numeric" class="required phone"> > 1 <input type="text" id="contact_phone" name="contact[phone]" > class="text" value="" required="" pattern="\(?0( *\d\)?){9,10}" > data-message="Please enter a valid phone number" /> > 1 <input name="phone" id="phone" maxlength="14" type="tel" > class="txt_mt10 txt_mb1" pattern="^[0-9 ]+$" speech required > x-webkit-speech /> > 1 <input class="occupy legible fixed-width skip-prefix-3 tel" > type="tel" name="mobile[connection]" id="sms_signup_mobile" > pattern="([-\s]*(0))?[-\s]*[1-9]([\s-]*[0-9]){9}"> > 1 <input class="occupy legible fixed-width skip-prefix-3 tel" > type="tel" name="mobile[connection]" id="ivr_signup_mobile" > pattern="([-\s]*(0))?[-\s]*[1-9]([\s-]*[0-9]){9}"> > 1 <input class="legible fixed-width quarter skip-prefix-3 tel" > type="tel" name="mobile[connection]" id="mobile_number" > pattern="([-\s]*(0))?[-\s]*[1-9]([\s-]*[0-9]){9}"> > 1 <input class="legible fixed-width quarter skip-prefix-3 tel" > type="tel" name="data[connection]" id="datacard_number" > pattern="([-\s]*(0))?[-\s]*[1-9]([\s-]*[0-9]){9}"> Seems reasonable (note that we now have type=tel, though that wouldn't stop the need for pattern=""). > 1 <input type="text" name="username" id="username" required > pattern="^[a-zA-Z][a-zA-Z0-9]{3,16}$" title="Your username must > be between 3 and 16 alpha numeric characters" maxlength="16" > class="inputb" onblur="javascript:CheckUserName();" > placeholder="BeerName00" > > 1 <input type="text" id="sn" name="sn" size="18" > spellcheck="false" required="" title="Username must be 2-20 > characters comprising of ( a-Z 0-9 - _ . ) and must start with a > letter." pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$" > > 1 <input name="r_username_sn" type="text" placeholder="Username" > spellcheck="false" required="" title="Username must be 2-20 > characters comprising of ( a-Z 0-9 - _ . ) and must start with a > letter." pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$" id="username" > /> Trying to constrain username syntax. Not sure why they'd do this, but given the need, it seems reasonable. > 1 <input type="text" data-required="mail email" data-shown="mail > email" maxlength="5" name="customer.address.zipcode" > pattern="\d{5}" /> > 1 <input name="zipCode" type="text" pattern="[0-9]*" > class="search-zipcode" placeholder="ZIP code" autocomplete="off" > tabindex="201" /> Reasonable if they want to disallow full ZIP codes, I guess... The second less so than the first, since it allows "1" and "123456". > 1 <input type="number" id="uses" name="uses" min="0" max="100000" > step="10" placeholder="Uses" pattern="[0-9]" value=""/> Bogus. Attribute will be ignored by the browser. > 1 <input onchange="if(this.value != '' && > !this.value.match(/^http/)) alert('Error - the website address > needs to start with http');" id="field_website" type="url" > pattern="^http.*" size="48" name="website" value="" > placeholder="http://"> Not entirely doing what they want ("http-this-is-not://..."), but the use case is what pattern="" on type=url was meant for, at least. > 1 <input name="r_username_sn" type="text" value="" size="25" > maxlength="40 required "title="User name must be 2-20 characters > comprising of ( a-Z 0-9 - _ . ) and must start with a letter." > pattern="^[a-zA-Z][a-zA-Z0-9\-\_\.]{1,20}$" > Markup error here, by the way (missing quote after '40'). Also, the attempted maxlength doesn't match the pattern's length. But other than that, same as the username case above (indeed it looks like a corrupted version of the above). > 1 <input name="r_url_website" type="text" value="" size="25" > required title="Please enter a valid website, can only contain > [a-Z 0-9 :/.]" pattern="(?=.+\..+)[a-zA-Z0-9\:\/\.]+" > This is silly, for the same reason the e-mail ones above are silly. > 1 <input name="r_text_lname" type="text" value="" size="25" > required title="Last Name can only contain letters, a space > and/or a dash" required pattern="[a-z A-Z\-]+" > > 1 <input name="r_text_fname" type="text" value="" size="25" > required title="First name can only contain letters and/or a > dash" required pattern="[a-z A-Z\-]+" > Sucks if you have a diacritic in your name. > 1 <input name="r_text_companyname" type="text" value="" size="25" > required title="Company name can only contain ( a-Z 0-9 _-&./# > )" required pattern="[a-z A-Z0-9-_\&\.\#\/]+" > Sorry Yahoo!. > 1 <input name="r_phone_phone" type="tel" spellcheck="false" > value="" size="25" required title="Please enter a valid phone > number (min 10 digits), in a format similar to +99 999-999-9999" > pattern="[0-9xX\#\-\(\)\. \+]{10,}$" > Sucks to be you if you live in the Cook Islands (8 digits). Also their pattern doesn't constrain it in the way they suggest. Not sure what the point really is. > 1 <input name="passphrase" type="text" placeholder="Pass" > id="passphrase" spellcheck="false" title="Passphrase must > contain only characters and numbers" pattern="[a-zA-Z0-9]{4}" > /> I don't think "phrase" means what they think it means. > 1 <input id="df-zipcode" class="df-input df-input75" type="text" > pattern="[0-9]{5,}" data-message="Ange postnummer med 5 siffror > utan mellanslag" maxlength="5" /> A combination of minlength and numeric-only input. (Note the way the pattern does minlength and the maxlength="" attributes does the maxlength.) > 1 <input id="captcha_code" type="text" required pattern="\d{5}" > name="captcha" size="6" maxlength="5" onkeyup="this.value = > this.value.replace(/[^\d]+/g, '');"> Fixed length non-number numeric input. > 1 <input class="occupy legible fixed-width text" type="password" > name="creditcard[cvv]" id="cc_cvv" pattern="\d*" > autocomplete="off"> > 1 <input class="occupy legible fixed-width skip-prefix-2 text" > type="text" name="dth[amount]" id="dth_amount" pattern="\d*"> > 1 <input class="occupy legible fixed-width skip-prefix-2 text" > type="text" name="biller[amount]" id="biller_amount" > pattern="\d*"> > 1 <input class="legible fixed-width two skip-prefix-2 text" > name="{{ service.toLowerCase() }}[amount]" id="recharge_amount" > type="text" pattern="\d*"> > 1 <input class="legible fixed-width two skip-prefix-2 text" > name="mobile[amount]" id="mobile_amount" type="text" > pattern="\d*"> > 1 <input class="legible fixed-width two skip-prefix-2 text" > name="data[amount]" id="datacard_amount" type="text" > pattern="\d*"> Non-number numeric input. > 1 <input pattern="[A-Za-z]" value="Быстрый поиск" > class="stdt_input" style="width:155px;" type="text" id="filter" > name="filter" /> Asking for a single letter.
So, use cases we don't handle outside of pattern="" that we might want to look at: - minlength (bug 10053) - trim (bug 17972) - year (though maybe type=number does this) - non-number numeric inputs - constrained-format telephone numbers I guess the last two are probably ok with pattern="", so I'll leave it as is for now (I don't see anything to win from another type="" for them, off-hand). As to this bug... I think this argues for us adding minlength="" to <textarea> as well, but I don't see it really arguing for pattern="". None of the use cases that really make sense make sense for <textarea> as far as I can tell, and few of the uses of pattern="" really were that sensible. I'd be worried about actually making things worse rather than better. Of the people who requested this feature, do any of you use setCustomValidity()?
(In reply to comment #10) > > 1 <input type="number" id="uses" name="uses" min="0" max="100000" > > step="10" placeholder="Uses" pattern="[0-9]" value=""/> > > Bogus. Attribute will be ignored by the browser. Just a quick FYI: at least on iOS using `pattern="[0-9]"` triggers the numeric keyboard, while just `<input type=number>` doesn’t (because in that case, the number may be e.g. a float which would require entering `.`). So it’s not entirely useless/bogus.
(In reply to comment #12) > (In reply to comment #10) > > > > 1 <input type="number" id="uses" name="uses" min="0" max="100000" > > > step="10" placeholder="Uses" pattern="[0-9]" value=""/> > > > > Bogus. Attribute will be ignored by the browser. > > Just a quick FYI: at least on iOS using `pattern="[0-9]"` triggers the > numeric keyboard, while just `<input type=number>` doesn’t (because in that > case, the number may be e.g. a float which would require entering `.`). So > it’s not entirely useless/bogus. That strikes me as an implementation bug that's easily fixed, not something to take into account.
(In reply to comment #10) > > 11 <input type="email" name="email" id="firefly-register-email" > > title="Email" placeholder="email@example.com" required > > pattern=".+@.+\..+"> > > 11 <input type="email" id="firefly-register-email-confirm" > > title="Email Confirmation" class="confirmation" > > autocomplete="off" placeholder="Confirm email" required > > pattern=".+@.+\..+"> > > 4 <input id="email" class="txt" type="email" name="email" > > required="required" > > pattern="^\s*[\w\.-]+(\+[\w-]*)?@([\w-]+\.)+[\w-]+\s*$" /> > > 2 <input type="email" required="required" id="resend_email_input" > > name="resend_email_input" autocomplete="off" email-extra="true" > > pattern="([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4}) > > +"/> > > 2 <input type="email" required="required" id="register_email" > > name="register_email" autocomplete="off" email-extra="true" > > pattern="([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4}) > > +"/> > > 1 <input type="email" id="email" class="textfield email required" > > name="email" placeholder="e-mailadres" > > pattern="^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2 > > ,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$" title="" /> > > 1 <input name="r_email_email1" type="email" value="" size="25" > > required title="Please enter a valid email in the form > > user@domain.com" > > pattern="(?=.+\@.+\.\w+)[a-zA-Z0-9\!\@\#\$\%\&\'\*\+\-\/\=\?\.\_ > > ]+"> > > Not sure what they're trying to do here. type=email should do all this for > them, no? Maybe we should disallow pattern="" for type=email? None of the > uses in this data set for type=email were the use cases for which we allows > pattern="" (namely, to limit e-mail addresses to specific hostnames, e.g. > ".+@harvard.edu"). I’ve had several clients whose back-end systems and databases simply couldn’t handle email addresses that didn’t match a predefined format. IMHO in such cases (while silly) it is acceptable to combine `type=email` with `pattern` to further restrict the email address format. (Of course it would be better to fix the back-end, but hey.) At first glance, the regular expressions that are being used here seem to be more restrictive than what `type=email` implies. (In reply to comment #13) > (In reply to comment #12) > > (In reply to comment #10) > > > > > > 1 <input type="number" id="uses" name="uses" min="0" max="100000" > > > > step="10" placeholder="Uses" pattern="[0-9]" value=""/> > > > > > > Bogus. Attribute will be ignored by the browser. > > > > Just a quick FYI: at least on iOS using `pattern="[0-9]"` triggers the > > numeric keyboard, while just `<input type=number>` doesn’t (because in that > > case, the number may be e.g. a float which would require entering `.`). So > > it’s not entirely useless/bogus. > > That strikes me as an implementation bug that's easily fixed, not something > to take into account. Why would that be an implementation bug? If iOS used the numeric keyboard by default for `type=number` inputs, there’d be no way to insert e.g. `.` into the field (needed for numbers with decimals).
> (In reply to comment #13) > > (In reply to comment #12) > > > (In reply to comment #10) > > > > > > > > 1 <input type="number" id="uses" name="uses" min="0" max="100000" > > > > > step="10" placeholder="Uses" pattern="[0-9]" value=""/> > > > > > > > > Bogus. Attribute will be ignored by the browser. > > > > > > Just a quick FYI: at least on iOS using `pattern="[0-9]"` triggers the > > > numeric keyboard, while just `<input type=number>` doesn’t (because in that > > > case, the number may be e.g. a float which would require entering `.`). So > > > it’s not entirely useless/bogus. > > > > That strikes me as an implementation bug that's easily fixed, not something > > to take into account. > > Why would that be an implementation bug? If iOS used the numeric keyboard by > default for `type=number` inputs, there’d be no way to insert e.g. `.` into > the field (needed for numbers with decimals). Numeric keyboards normally feature a decimal point precisely for the reason that numbers can contain one. In fact, iOS supports multiple types of numeric keyboards, including one that does not have a point (for phone numbers and the like) and one that does. If Safari isn't bringing up the latter for type=number, that's clearly a bug (and a fixable one, too, I would surmise).
(In reply to comment #11) > So, use cases we don't handle outside of pattern="" that we might want to > look at: > - minlength (bug 10053) > - trim (bug 17972) > - year (though maybe type=number does this) > - non-number numeric inputs > - constrained-format telephone numbers > > I guess the last two are probably ok with pattern="", so I'll leave it as is > for now (I don't see anything to win from another type="" for them, > off-hand). I guenss that non-number numeric inputs could also be helped with inputmode.
(In reply to Mathias Bynens from comment #14) > > I’ve had several clients whose back-end systems and databases simply > couldn’t handle email addresses that didn’t match a predefined format. Those just need to be fixed. Telling the user "sorry, your e-mail address is wrong" when it isn't doesn't make any sense. It's almost as bad as the examples above that tell people their phone number or _name_ is invalid. I'm punting on this one for now given the data we have so far. One thing that really would be helpful is to find out if the people who requested this feature use setCustomValidity(), and if so, what their experience with doing so is.
W3C Bugzilla is closing down, and as such we're closing all feature request bugs against HTML as "WONTFIX", at least wontfix-in-this-bugtracker. If you still think this feature is valuable, please feel free to open a new issue against https://github.com/whatwg/html/issues ; the community has gotten much more active and involved since the Bugzilla days, and you might get a more useful dialogue there.