React JS Form Validation | Axios User Registration Form Submit | Beginners to Intermediate
460.6 هزار بار بازدید -
3 سال پیش
-
Web Dev Roadmap for Beginners
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
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:
- Advanced React: https://bit.ly/AdvReactDev
- Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
- Master FAANG Coding Interviews: https://bit.ly/FAANGInterview
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
🚀 React JS for Beginners full course - 9 hours: React JS Full Course for Beginners | ...
👀 React Login tutorial series playlist: React Login, Registration, and Authen...
🔗 Source Code: https://github.com/gitdagray/react_re...
📬 Course Updates ➜ https://courses.davegray.codes/
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
☕ Buy Me A Coffee: https://www.buymeacoffee.com/davegray
🔗 Node JS Full Course (with source code) for building the backend REST API that will receive your form submissions: Node.js Full Course for Beginners | C...
🔗 FontAwesome for React:
https://fontawesome.com/v5.15/how-to-...
🔗 RegExr for Regular Expressions: https://regexr.com/
📚 Accessible Form References:
WebAIM.org - Advanced Forms: https://webaim.org/techniques/forms/a...
WebAIM.org - Form Validation: https://webaim.org/techniques/formval...
MDN - Aria Attributes:
aria-invalid: https://developer.mozilla.org/en-US/d...
aria-describedby: https://developer.mozilla.org/en-US/d...
aria-live: https://developer.mozilla.org/en-US/d...
aria-label: https://developer.mozilla.org/en-US/d...
🔗 ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/de...
📚 References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(...)
React Jobs: https://www.ziprecruiter.com/candidat...
✅ Follow Me:
Github: https://github.com/gitdagray
Twitter: Twitter: yesdavidgray
LinkedIn: LinkedIn: davidagray
Blog: https://yesdavidgray.com
Reddit: Reddit: DaveOnEleven
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
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:
- Advanced React: https://bit.ly/AdvReactDev
- Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
- Master FAANG Coding Interviews: https://bit.ly/FAANGInterview
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
🚀 React JS for Beginners full course - 9 hours: React JS Full Course for Beginners | ...
👀 React Login tutorial series playlist: React Login, Registration, and Authen...
🔗 Source Code: https://github.com/gitdagray/react_re...
📬 Course Updates ➜ https://courses.davegray.codes/
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
☕ Buy Me A Coffee: https://www.buymeacoffee.com/davegray
🔗 Node JS Full Course (with source code) for building the backend REST API that will receive your form submissions: Node.js Full Course for Beginners | C...
🔗 FontAwesome for React:
https://fontawesome.com/v5.15/how-to-...
🔗 RegExr for Regular Expressions: https://regexr.com/
📚 Accessible Form References:
WebAIM.org - Advanced Forms: https://webaim.org/techniques/forms/a...
WebAIM.org - Form Validation: https://webaim.org/techniques/formval...
MDN - Aria Attributes:
aria-invalid: https://developer.mozilla.org/en-US/d...
aria-describedby: https://developer.mozilla.org/en-US/d...
aria-live: https://developer.mozilla.org/en-US/d...
aria-label: https://developer.mozilla.org/en-US/d...
🔗 ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/de...
📚 References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(...)
React Jobs: https://www.ziprecruiter.com/candidat...
✅ Follow Me:
Github: https://github.com/gitdagray
Twitter: Twitter: yesdavidgray
LinkedIn: LinkedIn: davidagray
Blog: https://yesdavidgray.com
Reddit: Reddit: DaveOnEleven
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
3 سال پیش
در تاریخ 1400/10/10 منتشر شده
است.
460,677
بـار بازدید شده