Using Multiple Patterns in Form Field - regex

I'm attempting to create an email form field that requires a user to enter an email in the hello#domain.ext 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 hello#domain.ext 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>

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

Related

Password validation message is not displaying for alphanumeric regex format

Password validation message is not triggering, even if I provide just letters or just numbers in password field.
My intention is that, the password field should trigger validation message if the password is not alphanumeric format. I am using react-hook-form
<label>
<input className="inputRequest formContentElement" name="password" type="password" placeholder="Password"
onChange={onChange}
minLength={6}
ref={register({
required: "Required",
pattern: {
value: /^([a-zA-Z0-9]+)$/,
message: "Password should include letter and numbers !"
}
})}
/>
<span className="registerErrorTextFormat">{errors.password && errors.password.message}</span>
</label>
your reg expression allows either digits or letters, not at least one of each. change it to -
/^(?=.*?\d)(?=.*?[a-zA-Z])[a-zA-Z\d]+$/
first (?=.*?\d) at least one digit, second (?=.*?[a-zA-Z]) for at least one a-zA-Z (capital or not), and finally [a-zA-Z\d]+ as you wrote for only those types

How to take any character after period in input url pattern property?

I have a form as shown below in which URL field must start with http:// or https:// followed by at least one character.
<form action="/action_page.php">
Homepage: <input type="url" id="myURL" name="website" pattern="https?://.+\." title="Include http://">
<input type="submit">
</form>
Problem Statement:
I am wondering what changes I need to make in the pattern above so that user can enter any amount of character after period (\.) in the URL.
You can add .*$ to the end of your regex. This will allow the user to add zero or more characters after the dot pattern, out to the end of the string. If you'd like to prevent the user from adding more dots, you can use [^\.\s]*$ instead.
The complete regex is https?:\/\/.+\..*$ (Demo)

Regex match 3 characters followed by integers

I am new to regex expression and I need a regex in the following pattern:
The string must have a format of “TCK#”. TCK followed by integers.
For example, This is acceptable TCK123. This is not acceptable 123
Here is my current regex expression:
input class="form-control" required="true" type="text" name="TCKInput"
pattern="^[TCK][0-9]$">
With my current code, when the user enter TCK123, it is not acceptable, which is not what I am looking for
Change to below regex:
^(?:TCK)[0-9]+$
Demo: https://regex101.com/r/h9V7n1/1
Changes in the existing Regex you were using:
1) You were using [, ] around TCK which means regex has to match
any one of the values inside this bracket. As you have to match TCK
as it is, change it to (, )
2) You didn't mention + after [0-9] which means exactly one
occurrence will be matched. However, if you will mention +, it will
match one or more occurrence
If you want all 3 letters: TCK and then at least one or more digits after it, then try this:
^TCK\d+$
If you use [TCK] that will only accept one T, one C, or one K
Demo
This Demo sends to a live test server, so a successful submission of data will result in a response from said server
<form id='main' action='https://httpbin.org/post' method='post'>
<input class="form-control" required="true" type="text" name="TCKInput" pattern="^TCK\d+$">
<input type='submit'>
</form>

How to customize regex for input type tel in html5?

This is my current Regex:
<input type="tel" name="phone" value="" placeholder="Phone Number" title="019XXXXXXX" required pattern="[0-9]{2}[0-9]{3}[0-9]{3}[0-9]{4}">
It forces users to key in 12 digits to pass through the validation.
But all I want to do is, to allow users to key in up to 12 digits ,min would be 9. ANd they can opt to include + sign too. Also except for the +, the rest must be numbers only.
How to modify the regex pattern for this rules please?
You may try this,
required pattern="^[+]?[0-9]{9,12}$"
[+]? matches an optional + symbol.

Find text between key phrases

I have a var that have some text in:
<cfsavecontent variable="foo">
element.password_input=
<div class="holder">
<label for="$${input_id}" > $${label_text}</label>
<input name="$${input_name}" id="$${input_id}" value="$${input_value}" type="password" />
</div>
# END element.password_input
element.text_input=
<div class="ctrlHolder">
<label for="$${element_id}" > $${element_label_text}</label>
<input name="$${element_name}" id="$${element_id}"
value="$${element_value}" type="text"
class="textInput" />
</div>
# END element.text_input
</cfsavecontent>
and I am trying to parse through the var to get all of the different element type(s) here is what I have so far:
ar = REMatch( "element\.+(.*=)(.*?)*", foo )
but it is only giving me this part:
element.text_input=
element.password_input=
any help will be appreciated.
Your immediate problem is that by default . doesn't include newlines - you would need to use the flag (?s) in your regex for it to do this.
However, simply enabling that flag still wont result in your present regex doing what you're expecting it to do.
A better regex would be:
(element\.\w+)=(?:[^##]+|##(?! END \1))+(?=## END \1)
You would then do ListFirst(match[i],'=') and ListRest(match[i],'=') to get the name and value. (rematch doesn't return captured groups).
(Obviously the #s above are doubled to escape them for CF.)
The above regex dissected is:
(element\.\w+)=
Match element. and any alphanumeric, placed it into capture group 1, then match = character.
(?:
[^##]+
|
##(?! END \1)
)+
Match any number of non-hash characters, or a hash not followed by the ending token (using negative lookahead (?!...)) and referencing capture group 1 (\1), repeat as many times as possible (+), using a non-capturing group ((?:...)).
(?=## END \1)
Lookahead (?=...) to confirm the variable's ending token is present.