CODEWITHSUNDEEP
regexhtmlformsvalidationemail
Felicia Santos
Felicia Santos

Reputation: 421

Using Multiple Patterns in Form Field

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>

Upvotes: 4

Views: 2262

Answers (1)

Wiktor Stribiżew
Wiktor Stribiżew

Reputation: 627317

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.-]+.

Upvotes: 2

Related Questions