React JS Form Validation | Axios User Registration Form Submit | Beginners to Intermediate

Learn React JS Form Validation in this user registration form tutorial. This beginners to intermediate React JS lesson uses axios to submit a user registration form that is built with accessibility in mind.

⭐ Become a full-stack web dev with Zero To Mastery Courses:

React JS Form Validation | Axios User Registration Form Submit | Accessible Registration Form

(00:00) Intro
(00:22) Welcome
(00:30) Intermediate level - Faster Pace
(01:05) Setup and overview
(01:59) Installing and importing dependencies
(04:32) Regex for validation
(05:22) App refs and state
(07:12) useEffect and validation logic
(09:42) Displaying error messages
(11:17) Username input
(17:50) Password input
(21:21) Password confirmation input
(24:16) Form submit button
(25:21) Link to sign in form
(26:02) handleSubmit function
(28:08) Will you submit to a server?
(29:10) Displaying a success screen
(31:38) Addiing Axios to the project
(33:38) Completing handleSubmit with Axios
(37:27) Axios error handling
(39:15) Testing the form with a Node JS REST API
(41:53) Testing Accessibility with a screen reader

🔗 FontAwesome for React:

📚 Accessible Form References:
MDN - Aria Attributes:

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:

📚 References:

✅ Follow Me:

Was this tutorial about creating a React User Registration form with validation, axios, and accessibility features helpful? If so, please share. Let me know your thoughts in the comments.

#react #form #validation

[Alibeee]

For anyone curious about pursuing Dave Grey's tutorials: I'm getting my master's in software engineering with no background in the field (don't get me started on all of that). I followed Dave's tutorials to help me with a class, and my prof and classmates were thoroughly impressed with what I came up with. All kudos to Dave. I strongly encourage anyone to follow his work, I wouldn't have gotten an A in my class without him!

[ebn]

I just got a job promotion from frontend dev to fullstack dev and Dave's videos have proven to be invaluable in their comprehensiveness and detail.

[reilg]

Love the way you describe every little thing you do. "Minimize this, maximize that, Ctrl + B to hide, etc". Really nice for the people who don't use the same tool sets.

[emmanueljoseph]

Exactly the tutorial I've been looking for. Thanks for this course Dave.
You didn't just go straight to your project, you also explained why you used some things and how we can use them differently depending on what we want or the circumstance.
Thank you again.

[GabrielMartinez-ezue]

Excellent! Please continue with this series... Navbars, react auth, etc... With your tutorials I have changed a lot of my old code due to bad habits

[jhbwjkz]

OMG! This is the best tutorial I've ever seen. It's very understandable and your speach is also so clear! Thank you so so much!

[enesli]

That was epic! Accessibility was never talked on a video I watched and you wrote your whole code based on accessibility. That's wonderful.

[ciaranjmcgv]

Incredibly thorough tutorials, real world examples and it's all step by step.. you are brilliant!

I use ReactJS as my frontend with a .NET Core backend, though I'm also starting to learn Node & Angular specifically for a personal project. I'm also doing my degree (BSc Computing & IT / Software Engineering) part time while I work & this is helping me learn so many different topics in a fraction of the time. The form validation, JWT auth (w/ aT & rT), Axios interceptors and the rest of the content covered in this playlist are absolute gold. Thanks so much for sharing all of this with us.

You've definitely got another subscriber 😁

[icvetz]

Definitely one of the most well put together tutorials I've come across. You're a great teacher. Thanks Dave.

[loren_michael]

Coming across this as a beginner who is interested in but has not yet been taught much about accessibility, THANK YOU for teaching me some amazing things in this video. I'm looking forward to delving into so much more of your content after watching this.

[dinhjdev]

Perfectly explained, divided, and paced!

I'm relatively new to React and I didn't get lost at all since this tutorial was perfect. I also took the liberty to add in my own email field with validation as well. Also glad that you included accessibility.

Thanks!

[dylan]

Hi Dave. Thanks for releasing this video. It's pretty darn comprehensive and seems it could be used as a blueprint for most login forms.

I like that you make the IDE's text much larger and have a theme that's easy to read. You'll be surprised by how many YouTubers overlook these details, (which in my opinion makes the videos unwatchable).

Will you be releasing any TypeScript content? I have been studying JS (and FE development overall) for just over a year. My intention is to transition from my current (non-developer related) job to a FE dev later this year. I started learning TS as it seems the trend is going that way, especially for modern FE development such as React. I wondered if you'd be releasing any TS content as you're a great teacher and in truth there isn't a whole lot of quality TS React videos on YT, so I feel you could capitalize on that.

All the best.

[Darklrd]

Great work Dave! Please continue to roll out more useful content like this. Much much appreciated!

[hjbigjh]

Hi Dave, you're way better than others, especially by adding assistance features. Now, because you asked, I'm going to mention that It puts me off if you do copy paste or don't follow the flow of the logic. It's better if you do everything from scratch logically. For example, I don't like it when you put all the states first and then use it, I'd prefer you start writing react renders first then write the hooks and JS when needed in logic. Overall though it's been a pleasure to learn from you. Nice 👍

[NoorNoor-bljr]

I am watching this video after three years but it still help me alot thanks thanks alot Dev

[dilrukshiperera-yobr]

This course was useful for me, in developing a website as an intermediate.

[fiorini_mochachino]

Really good approach having the code written beforehand and just pasting bits and explaining them.

[Booker_DeVitt]

Awesome. With your tutorials you make it so much easier to learn React. Wish I discovered your channel when I just started learning JS because back then it was a nightmare. But you explain every step perfectly. I`m definetely going to finish all your tutorials. Thanks a lot ! ))

[saadarman]

Wonderful Tutorial. Learned a lot. Thanks Dave.

[aiarchitect.me.]

The best production-ready tutorial I ever had.