Regular Expressions (RegEx) Tutorial #13 - Testing a RegEx Pattern

Hey gang, in this RegEx tutorial I'll show you how we can validate a form field using the regex test method, like so:

/myregex/.test(field_value)

If you need a refresher on JS, check out one of these 2 playlists:

JS for beginners:

JS an the DOM:

----- COURSE LINKS:

======== Other Tutorials =========

----- NODE.JS TUTORIALS

----- MONGODB TUTORIALS

======== Social Links ==========

[kayodeagboola]

2 years later, this is still the best regex tutorial i've seen on the internet

[gyohza]

I get the purpose of this tutorial and it's a great vid.

However, I feel the need to mention the *pattern* attribute of input elements, which takes a regular expression to evaluate the input's contents:

- It's standard and thoroughly supported in modern browsers;
- It's easier, cleaner and faster than implementing JS;
- It will prevent user submission upon mismatches;
- A mismatch will also trigger a tooltip with the contents of the *title* attribute. Also the element's style can henceforth be modified with the :invalid pseudo-class in CSS, so you wouldn't need to programmatically add classes to the element.

It's also worth noting that selecting the right input type may even provide some sort of default validation in some browsers (such as type="email", which will automatically validate email regardless of a pattern attribute; or type="date", which might display a datepicker to the user upon focus).

[quentinmckay]

Thanks for the greats series. Two things:
1) " e.target.name " also seems to work (instead of
2 ) " field.className = 'valid' " will overwrite ALL of the classes applied to that element. Works ok for this small example but perhaps a "better" solution is to use Of course, then you would also have to when it's invalid.

[return_undefine]

I'm watching this after five years and yet it's the best on YouTube. I can't thank you enough. I love the fact that you don't rush things, you take enough time to explain again and again. Your teaching skill and quality makes you unique. Even a complete beginner will understand you. Your channel is in fact best for beginners and advanced. I attempted following others, have subscribed to many YouTube channels just to learn JavaScript, Regex, PHP all to no avail. They're too fast and sometimes forget the video is actually for beginners. I appreciate your efforts Sir and I think it's a blessing getting to know your channel. I'm sticking here 💚

[angelnarvaez]

I was struggling with regex, thanks to you I no longer have a bad time understanding regex. Greetings from Venezuela.

[SheriffKoder]

At this point i am still learning JS and this video did stretch my knowledge to the next level, i have read codes looking like this before but could not really understand them very well but now i can, Thanks Shaun

[shilohgeorge]

4yrs on and still the best tutorial I’ve seen on Regex so far
Thanks a lot 🙏🏼

[makabongwemetuso]

I just watched it and regex form validation makes absolute sense now 😍🤞🏾💯

[brittanyneal]

I absolutely loved this video - thank you so much! Nice little refresher on JS + great step by step instructions on the validation.

[anzorro]

I don't understand Js before, but after your videos I've understood something! Thank you for your tutorials Shaun!

[laurelineparis]

I have to say, so far, you are a great pedagog, love what you are doing, love the video format you giving and all the amazing explanation you're providing us :3. I already knew regexp but wanted to kinda master it or know more and not doing: "yeah, I need regexp to control my input, I know some stuff but don't quite remember all syntax bits ( I already knew regexp101 ) let's try to find my way through regexp101 " and now, just before doing this project, I really can say " I need some regexp, so this is ( now the girl is writing by herself the regexp and check it in regexp101 " as quick as I just described and that is thanks to you so thank you :) SIR Sensai

[tianxiaodeng]

Hi，ninja
querySelectorAll returns a NodeList ，not a HTMLCollection

[TiffanyNg]

i subbed so fast because its explained so clear and it a short time that i can learn

[Jose-tluy]

Hey Shaun, I just finished with your udemy course, thought i'd try event bubbling instead. Is there a reason why I shouldn't? Or is it just a case of we don't have a lot of elements that need listeners and we arn't adding any new elements to the page so hard coding them is fine? Thanks for being such a great teacher!
document.querySelector('form').addEventListener('keyup', e => {
let key = e.target.name;
let regex = patterns[key];
e.target.style.background = 'red';
if (regex.test(e.target.value)) {
console.log(e.target.id);
e.target.style.background = 'green';
}
});

[gowthamraj]

Is it possible to write dynamic value in regex pattern ?

[parthbhoir]

Which dark theme are you using for atom.It seems pretty cool

[gameboy]

I am new so little bit confused because validate is a custom function the regex is just an argument then where does regex.test() method comes from ?

[SuperKojota]

I have problem with regex.test, didnt work for me.I got message: Uncaught TypeError: Cannot read property 'test' of undefined
at validate (index.html:59)
at HTMLInputElement.<anonymous> (index.html:65)

[nicoregules]

One liner: const validate = (field, regex) => field.className = regex.test(field.value) ? 'valid' : 'invalid';

[jackkahn]

Hey thanks for the tutorial! I just wanted to ask, whats the difference between name and id html property.. When to use which ?