Using Multiple Patterns in Form Field

Question

I'm attempting to create an email form field that requires a user to enter an email in the [email protected] format but also only allowing business emails to come through (no gmail, yahoo, hotmail, ect.)

I've created 2 field patterns that work independently, but I can't seem to get them to work together.

Requires a [email protected] format

pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"

Does not allow these free email domains. Business emails only.

pattern="^(?!.*@(?:live|gmx|yahoo|outlook|msn|icloud|facebook|aol|zoho|yandex|lycox|inbox|myway|aim|goowy|juno|(?:hot|[gy]|google|short|at|proton|hush|lycos|fast)?mail)\.\w+$).*$"

Here is my form code:

    <form  method="POST" action="#">

    <input type=hidden name="oid" value="00D70000000KCoG">
    <input type=hidden name="retURL" 
    value="#">

    <label for="email">Email</label><input id="email" maxlength="80" 
    name="email" size="30" type="email" 
    oninvalid="setCustomValidity('Please enter your business email here.')" 
    onchange="try{setCustomValidity('')}catch(e){}" pattern="[a-z0-
    9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required />

    <input type="submit" name="submit" value="Submit">
    </form>

I ask out of curiosity - is there a difference between specifying pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" and specifying type="email"? — Rounin
– Rounin, Commented Aug 28, 2017 at 15:03
type="email" allows one to enter the email a@b, but pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" only allows emails in the [email protected] format. — Felicia Santos
– Felicia Santos, Commented Aug 29, 2017 at 9:14
@Felicia Please check my answer below, and let know if it works fine for you or you need more help. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Aug 29, 2017 at 10:22

Wiktor Stribiżew · Accepted Answer · 2017-08-28 20:23:45Z

Here are the two patterns combined:

pattern="[a-z0-9._%+-]+@(?!(?:live|gmx|yahoo|outlook|msn|icloud|facebook|aol|zoho|yandex|lycox|inbox|myway|aim|goowy|juno|(?:hot|[gy]|google|short|at|proton|hush|lycos|fast)?mail)\.\w+$)[a-z0-9.-]+\.[a-z]{2,4}"

Note that the ^ at the start and $ at the end are not necessary as they are implicit there: pattern value is wrapped with ^(?: and )$ to match the entire input value.

See the regex demo.

Details

^ - implicit - start of string
[a-z0-9._%+-]+ - one or more letters, digits, ., _, %, + or -
@ - a @
(?!(?:live|gmx|yahoo|outlook|msn|icloud|facebook|aol|zoho|yandex|lycox|inbox|myway|aim|goowy|juno|(?:hot|[gy]|google|short|at|proton|hush|lycos|fast)?mail)\.\w+$) - a negative lookahead the fails the match if the pattern matches immediately to the right of the current location (that is, after @)
[a-z0-9.-]+ - 1+ lowercase ASCII letters, digits, . or/and -
\. - a dot
[a-z]{2,4} - 2 to 4 lowercase ASCII letters.

NOTE: you might want to add A-Z to the character classes: [a-z0-9._%+-]+ => [\w.%+-]+ and [a-z0-9.-]+ => [a-z0-9A-Z.-]+.

Collectives™ on Stack Overflow

Using Multiple Patterns in Form Field

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related