Validate HTML form entries with Regex Patterns - javascript

I currently use a regex pattern that prevents = being used in form entries. I wish to extend this to only allow form entries in this fields from certain urls? How can I add a wildcard domain regex entry AND maintain using the other = pattern?
<input name="url" pattern="[^=]+" type="url" placeholder="Amazon URL" required>
VALID ENTRIES
https://www.amazon.co.uk/dp/B01DFKBL68
https://www.amazon.co.uk/dp/B07H3NY1H6/
https://www.amazon.co.uk/b/ref=footer_topup_uk?ie=UTF8&node=13958953031&tag=deals70-21
INVALID ENTRIES
https://www.amazon.com/Disc-O-Bed-Large-with-Organizers-Black/dp/B01GSA9O3O
https://www.google.com
Here is what I have so far, which isn't working:
pattern="[^=|https://www.amazon.co.uk/*]+"

You may use
pattern="(?!https://www\.amazon\.co\.uk/)[^=]+"
The HTML5 pattern regex is automatically put inside ^(?: and )$, so it will look like ^(?:(?!https://www\.amazon\.co\.uk/)[^=]+)$:
^(?: - start of string and of a non-capturing outer container group
(?!https://www\.amazon\.co\.uk/) - the string cannot start with https://www.amazon.co.uk/
[^=]+ - one or more chars other than =
)$ - end of the non-capturing group and the end of the string.

Related

Regex pattern to extract name from emails

I need some help to find a regex expression to extract user names from these emails:
(Regex newbie here)
john.stewartcompany1#example.com
bruce.williamscompany1#example.com
richard.weiss#example.com
julia.palermocompany2#example.com
edward.philipscompany3#example.com
As you can see from the emails, almost all of them have the company name following the name. (company1, company2, company3)
But some emails have no company inserted. (See richard.weiss)
All of them will have #example.com
So I need to extract only the names, without the company, like this:
john.stewart
bruce.williams
richard.weiss
julia.palermo
edward.philips
I've come up with this pattern so far:
/(.+)(?=#example.com)/g
This only solves half of the problem, as it keeps the company name in the names.
john.stewartcompany1
bruce.williamscompany1
richard.weiss
julia.palermocompany2
edward.philipscompany3
I still need to remove the company names from the user names.
Is there a way to accomplish this with a single regex pattern?
Any help appreciated.
PS:
Thanks for the replies. I forgot to mention...
The company names are limited.
We can safely assume from my example that there will be only
company1, company2 and company3.
Thanks.
You can use
^.*?(?=(?:company1|company2|company3)?#)
See the regex demo.
Details:
^ - start of string
.*? - any zero or more chars other than line break chars as few as possible
(?=(?:company1|company2|company3)?#) - a positive lookahead that requires the following subpatterns to match immediately to the right of the current location:
(?:company1|company2|company3)? - an optional company1, company2 or company3 char sequence
# - a # char.

HTML Form Validation - Check for Specific Characters

I'm using the Html5 pattern to validate my inputs on forms. I need to make sure an input has the following rules:
A maximum and minimum of 8 characters
The first 3 must be the specific letters wrx (lowercase)
The last 5 must be numbers.
Eg. wrx12345
Can I even do this with pattern or do I need to use JavaScript?
I believe the regex pattern you are looking for is /^wrx[0-9]{5}$/. A visual representation of this here:
And implemented in html:
<input name="example" pattern="^wrx[0-9]{5}$">
You can use regex in Javascript with this regex:
"/[wrz][\d]{5}/g".
To test the minimum = maximum length = 8, you can just test it in javascript.
If the length egual 8, use the regex
Else, show error
I think this could work
You don't need Javascript to do this.
The pattern attribute uses regular expressions so you can use something like this: ^wrx[0-9]{5}$
The ^ and $ indicates the start and end of the string. Then 'wrx' has to be matched exactly and [0-9]{5} looks for 5 number bewteen 0-9.
You can use something like RegExr to test your patterns.

Regex not recognizing input value for vehicle license plate

I'm having a problem with my regex validation code. I'm trying to figure out how can I validate a vehicle license plate number. The code that I wrote is listed below this message. This is written down in React inline code and I've written down two different regex expressions and both of the come out to be false. The license plate number should be in this format XX-NNNN-XX.
X = Letter
N = Number
const [licencePlate, setLicencePlate] = useState('');
var ValidateLicencePlate = /^[A-Z][A-Z]-[0-9][0-9][0-9][0-9]-[A-Z][A-Z]$/g ;
var regex = /^[A-Z]{2}-[0-9]{4}-[A-Z]{2}$/g ;
<input name="licence-plate" type="text" className="feedback-input" maxLength='10' onChange={(e) => setLicencePlate(e.target.value.toUpperCase())} placeholder="XX-NNNN-XX"/>
This regex can solve the problem.
let regex = /^[A-Z]{2}-\d{4}-[A-Z]{2}/gi
This regex will match two alphabet at the beginning, four digits at the middle and two alphabet at the end.
You can use regex as following
<input pattern="/^[A-Z]{2}-\d{4}-[A-Z]{2}/g"/>
You can put your regex in the pattern attribute of the input element. I do not see you are using regexps yo have defined anywhere in your listing.
<input pattern={regex}/>
If you have a regex constraint to validate against it may be better and more comfortable to use Constraint Validation API.
<input pattern="your regex here"/>
Browser already validates everything in form elements if you constraint them with various ways like patter attribute and unless you tell it not to validate. But still I see many code bases trying to do the validation themselves. It is unnecessary since there is a way platform itself supports and does itself.

Matching an input pattern beginning of script

I'm trying to match only GitHub URLs with the following input tag:
<input type="url" id="repoUrl" title="Must be a full URL to a GitHub repository" pattern="^https:\/\/github\.com\/" required>
In regex101 this exact pattern is matching all strings that start with "https://github.com" which is what I want, but the problem is that when I call the checkValidity() method on that input, it only says it's valid if the input is only "https://github.com".
What do I need to change to make this regex work how it works in regex101?
try to add .* in the end of a pattern
pattern="^https:\/\/github\.com\/.*"

Validate File Type using Foundation Abide

I'm looking to use Foundation's Abide plug-in to validate the type of file extension uploaded into a type="file" input tag, but I'm having troubles validating the check against the RegExp correctly.
html:
<div class="large-2 columns button">
<input id="uploadResume" type="file" required pattern="resume" />
<small class="error">PDF or Word Document only please</small>
</div>
javascript:
$(document)
.foundation().foundation('abide', {
patterns: {
// check if the last 3 letters are acceptable
resume: /^.(doc|DOC|pdf|PDF)*$/
}
});
For now you are trying to match any one character followed by the mentioned extenions, so try this pattern:
PATTERN
/\.(doc|DOC|pdf|PDF)$/
It will match only dot followed by any of mentioned extensions, so the possibilities will be:
.doc
.DOC
.pdf
.PDF
But if you want to match whole filename + extension use this:
PATTERN
/^.+?\.(doc|DOC|pdf|PDF)$/
Added .+? after ^ which means 'match any character except new line 0 or more times until satisfying the next token, added also \. to match a dot before extenion. I also removed * which is not needed and would cause repeating extenions.
Examples
filename.PDF
This file will be matched.
filename.exe
This will be not matched.
FINAL ANSWER
Using 2nd pattern as inline pattern:
<input type="file" required pattern="^.+?\.(doc|DOC|pdf|PDF)$" />.
Apparently there is some issue while using inline patterns which forces you to remove the forward slashes both at the beginning of the pattern and at the end of it. Also the named patterns seem to work well weird and I'm not surely why is that.

Categories