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

description
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: https://youtu.be/RVFAyFWO4go 👀 React Login tutorial series playlist: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd 🔗 Source Code: https://github.com/gitdagray/react_register_form 📬 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: https://youtu.be/f2EqECiTBL8 🔗 FontAwesome for React: https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react 🔗 RegExr for Regular Expressions: https://regexr.com/ 📚 Accessible Form References: WebAIM.org - Advanced Forms: https://webaim.org/techniques/forms/advanced WebAIM.org - Form Validation: https://webaim.org/techniques/formvalidation/ MDN - Aria Attributes: aria-invalid: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute aria-describedby: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby aria-live: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live aria-label: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label 🔗 ES7 React JS Snippets Extension for VS Code: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets 🔗 React Dev Tools Extension for Chrome: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi 📚 References: ReactJS Official site: https://reactjs.org/ React Wikipedia: https://en.wikipedia.org/wiki/React_(JavaScript_library) React Jobs: https://www.ziprecruiter.com/candidate/search?search=react&location= ✅ Follow Me: Github: https://github.com/gitdagray Twitter: https://twitter.com/yesdavidgray LinkedIn: https://www.linkedin.com/in/davidagray/ Blog: https://yesdavidgray.com Reddit: https://www.reddit.com/user/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

detail
{'title': 'React JS Form Validation | Axios User Registration Form Submit | Beginners to Intermediate', 'heatmap': [{'end': 375.285, 'start': 318.301, 'weight': 0.873}, {'end': 495.072, 'start': 428.192, 'weight': 0.968}, {'end': 2389.801, 'start': 2356.151, 'weight': 1}], 'summary': 'This tutorial series on react js covers creating a registration form with custom validation and font awesome installation, react component creation and state management, accessible forms with font awesome icons, password field attributes and validation, form submission with axios integration, and handling registration errors with custom validation, targeting intermediate users.', 'chapters': [{'end': 318.301, 'segs': [{'end': 54.588, 'src': 'embed', 'start': 25.098, 'weight': 0, 'content': [{'end': 29.963, 'text': "Let's create a React registration form with custom validation and accessibility features.", 'start': 25.098, 'duration': 4.865}, {'end': 37.952, 'text': "I've got Visual Studio Code open here on the left and an example of the registration form that we're going to create running in Chrome on the right.", 'start': 30.444, 'duration': 7.508}, {'end': 41.657, 'text': 'Now, this tutorial is more intermediate level than it is beginner.', 'start': 37.972, 'duration': 3.685}, {'end': 48.142, 'text': 'Ideally, you will have already completed my React for Beginners course or a similar course for getting started with React.', 'start': 42.217, 'duration': 5.925}, {'end': 54.588, 'text': "Now, I'm not going to explain all the basics of the React hooks I use or go into detail about the basic setup.", 'start': 48.543, 'duration': 6.045}], 'summary': 'Creating a react registration form with custom validation and accessibility features at an intermediate level.', 'duration': 29.49, 'max_score': 25.098, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ25098.jpg'}, {'end': 123.046, 'src': 'embed', 'start': 78.747, 'weight': 1, 'content': [{'end': 85.17, 'text': "And then when we look at the package JSON, you can see I've even uninstalled any dependencies that we won't be using.", 'start': 78.747, 'duration': 6.423}, {'end': 88.711, 'text': "So I've just got React, React DOM, and React scripts at this time.", 'start': 85.29, 'duration': 3.421}, {'end': 90.552, 'text': 'We can add in some more as well.', 'start': 88.772, 'duration': 1.78}, {'end': 98.536, 'text': "And then when we look at the app.js, you can see I've already created a register component, and I'm importing that.", 'start': 91.213, 'duration': 7.323}, {'end': 101.557, 'text': "And that's what we're putting here in the JSX.", 'start': 99.136, 'duration': 2.421}, {'end': 105.659, 'text': 'Also, I have changed the default div to a main element.', 'start': 102.097, 'duration': 3.562}, {'end': 107.9, 'text': 'I prefer semantic HTML elements.', 'start': 105.759, 'duration': 2.141}, {'end': 109.7, 'text': 'Still left the class name app.', 'start': 108.2, 'duration': 1.5}, {'end': 112.962, 'text': "And that's all of the changes to the app file.", 'start': 110.301, 'duration': 2.661}, {'end': 116.143, 'text': "So really, we're creating a self-contained component today.", 'start': 113.002, 'duration': 3.141}, {'end': 119.124, 'text': 'And that is going to be in our register.js.', 'start': 116.683, 'duration': 2.441}, {'end': 121.905, 'text': "So let's start by importing the hooks we're going to use.", 'start': 119.444, 'duration': 2.461}, {'end': 123.046, 'text': "So I'll type import.", 'start': 122.005, 'duration': 1.041}], 'summary': 'Package json includes react, react dom, and react scripts. app.js has a register component with semantic html changes. creating a self-contained component in register.js.', 'duration': 44.299, 'max_score': 78.747, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ78747.jpg'}, {'end': 167.766, 'src': 'embed', 'start': 144.651, 'weight': 3, 'content': [{'end': 151.996, 'text': "OK, now that we've imported the three hooks that we're going to use, let's also add some other imports from Font Awesome.", 'start': 144.651, 'duration': 7.345}, {'end': 154.778, 'text': "But first, we'll need to install that Font Awesome dependency.", 'start': 152.036, 'duration': 2.742}, {'end': 160.681, 'text': "So if we go to Chrome, I'm going to open up the Font Awesome page, talking about React.", 'start': 154.878, 'duration': 5.803}, {'end': 167.766, 'text': 'And Font Awesome will provide SVGs as React components when we install Font Awesome correctly here with NPM.', 'start': 160.782, 'duration': 6.984}], 'summary': 'Imported three hooks, installed font awesome dependency for svgs as react components using npm.', 'duration': 23.115, 'max_score': 144.651, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ144651.jpg'}, {'end': 301.883, 'src': 'embed', 'start': 270.298, 'weight': 5, 'content': [{'end': 272.339, 'text': "Now we've got all we need from font awesome.", 'start': 270.298, 'duration': 2.041}, {'end': 277.584, 'text': "Okay, I'm going to give an extra line here and paste in two reg x statements here.", 'start': 272.8, 'duration': 4.784}, {'end': 281.207, 'text': "So we've got a user reg x that we're going to validate the username with.", 'start': 277.684, 'duration': 3.523}, {'end': 284.689, 'text': "and a password regex that we're going to validate the password with.", 'start': 281.747, 'duration': 2.942}, {'end': 288.792, 'text': 'The user regex says it must start with a lower or uppercase letter.', 'start': 285.129, 'duration': 3.663}, {'end': 296.317, 'text': 'After that, it must be followed by anywhere from three to 23 characters that can be lower or uppercase letters.', 'start': 289.092, 'duration': 7.225}, {'end': 301.883, 'text': 'digits, hyphens, or underscores, and any of that will work.', 'start': 297.137, 'duration': 4.746}], 'summary': 'Using two regex statements to validate username and password with specific criteria.', 'duration': 31.585, 'max_score': 270.298, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ270298.jpg'}], 'start': 0.089, 'title': 'Creating react registration form and installing font awesome', 'summary': 'Discusses creating a react registration form with custom validation and accessibility features, targeting intermediate level users. it also covers the installation of font awesome dependencies using npm and defining regular expressions for validation.', 'chapters': [{'end': 144.111, 'start': 0.089, 'title': 'Creating react registration form', 'summary': 'Discusses creating a react registration form with custom validation and accessibility features, aimed at intermediate level users who have completed a beginner react course, using minimal dependencies and semantic html elements, and focusing on self-contained components.', 'duration': 144.022, 'highlights': ['The chapter focuses on creating a React registration form with custom validation and accessibility features, emphasizing a more intermediate level of knowledge and experience in React (quantifiable data: intermediate level, React for Beginners course completion).', 'The tutorial uses minimal dependencies, with only React, React DOM, and React scripts being utilized initially, and semantic HTML elements are preferred for better accessibility (quantifiable data: minimal dependencies, semantic HTML elements).', 'The discussion centers on creating self-contained components, with a specific emphasis on the register.js file, and importing hooks such as use ref, state, and effect for the form creation (quantifiable data: self-contained components, use ref, state, effect).']}, {'end': 318.301, 'start': 144.651, 'title': 'Installing font awesome and importing components', 'summary': 'Covers the installation of font awesome dependencies using npm, adding import statements for font awesome components, and defining regular expressions for username and password validation.', 'duration': 173.65, 'highlights': ['Installing Font Awesome dependencies using NPM The tutorial walks through the process of installing Font Awesome dependencies using NPM, with the final package JSON reflecting the successful installation.', 'Adding import statements for Font Awesome components The process of importing Font Awesome components (FA check, FA times, FA info circle) is demonstrated, ensuring all necessary components are accessed for use.', 'Defining regular expressions for username and password validation Two regex statements are pasted in for validating usernames and passwords, with specific criteria outlined for each, such as character limits and required character types.']}], 'duration': 318.212, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ89.jpg', 'highlights': ['The chapter focuses on creating a React registration form with custom validation and accessibility features, emphasizing a more intermediate level of knowledge and experience in React (quantifiable data: intermediate level, React for Beginners course completion).', 'The tutorial uses minimal dependencies, with only React, React DOM, and React scripts being utilized initially, and semantic HTML elements are preferred for better accessibility (quantifiable data: minimal dependencies, semantic HTML elements).', 'The discussion centers on creating self-contained components, with a specific emphasis on the register.js file, and importing hooks such as use ref, state, and effect for the form creation (quantifiable data: self-contained components, use ref, state, effect).', 'Installing Font Awesome dependencies using NPM The tutorial walks through the process of installing Font Awesome dependencies using NPM, with the final package JSON reflecting the successful installation.', 'Adding import statements for Font Awesome components The process of importing Font Awesome components (FA check, FA times, FA info circle) is demonstrated, ensuring all necessary components are accessed for use.', 'Defining regular expressions for username and password validation Two regex statements are pasted in for validating usernames and passwords, with specific criteria outlined for each, such as character limits and required character types.']}, {'end': 658.338, 'segs': [{'end': 353.311, 'src': 'embed', 'start': 318.301, 'weight': 0, 'content': [{'end': 322.565, 'text': "so that's what we will be validating the user input with in those fields.", 'start': 318.301, 'duration': 4.264}, {'end': 324.707, 'text': "now we're ready to go ahead and create our component.", 'start': 322.565, 'duration': 2.142}, {'end': 327.35, 'text': "i'm going to press ctrl alt and the letter r.", 'start': 324.707, 'duration': 2.643}, {'end': 331.294, 'text': 'you might try typing this directly into your file as well and do underscore r-a-f-c-e.', 'start': 327.35, 'duration': 3.944}, {'end': 336.298, 'text': 'Press enter and we get a React functional component.', 'start': 333.596, 'duration': 2.702}, {'end': 339.821, 'text': "Now I've got ES7 React snippets installed to do this.", 'start': 336.378, 'duration': 3.443}, {'end': 342.783, 'text': "It's an extension that you can search for over here under extensions.", 'start': 339.961, 'duration': 2.822}, {'end': 345.485, 'text': "I'll also provide a link to that in the description.", 'start': 343.243, 'duration': 2.242}, {'end': 350.309, 'text': "Now that we've got our functional component, which, if you don't have that extension, you may have to type out,", 'start': 346.106, 'duration': 4.203}, {'end': 353.311, 'text': 'we can go ahead and start adding some information there.', 'start': 350.849, 'duration': 2.462}], 'summary': 'Creating a react functional component using es7 snippets and validating user input.', 'duration': 35.01, 'max_score': 318.301, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ318301.jpg'}, {'end': 375.285, 'src': 'heatmap', 'start': 318.301, 'weight': 0.873, 'content': [{'end': 322.565, 'text': "so that's what we will be validating the user input with in those fields.", 'start': 318.301, 'duration': 4.264}, {'end': 324.707, 'text': "now we're ready to go ahead and create our component.", 'start': 322.565, 'duration': 2.142}, {'end': 327.35, 'text': "i'm going to press ctrl alt and the letter r.", 'start': 324.707, 'duration': 2.643}, {'end': 331.294, 'text': 'you might try typing this directly into your file as well and do underscore r-a-f-c-e.', 'start': 327.35, 'duration': 3.944}, {'end': 336.298, 'text': 'Press enter and we get a React functional component.', 'start': 333.596, 'duration': 2.702}, {'end': 339.821, 'text': "Now I've got ES7 React snippets installed to do this.", 'start': 336.378, 'duration': 3.443}, {'end': 342.783, 'text': "It's an extension that you can search for over here under extensions.", 'start': 339.961, 'duration': 2.822}, {'end': 345.485, 'text': "I'll also provide a link to that in the description.", 'start': 343.243, 'duration': 2.242}, {'end': 350.309, 'text': "Now that we've got our functional component, which, if you don't have that extension, you may have to type out,", 'start': 346.106, 'duration': 4.203}, {'end': 353.311, 'text': 'we can go ahead and start adding some information there.', 'start': 350.849, 'duration': 2.462}, {'end': 359.835, 'text': "So I'm going to scroll up and give us some room where we can put in some state and other hooks in our component.", 'start': 353.331, 'duration': 6.504}, {'end': 363.857, 'text': "I'm going to start by putting in two use ref references.", 'start': 359.855, 'duration': 4.002}, {'end': 369.621, 'text': "We're going to do one for the user input and that will allow us to set the focus on the user input when the component loads.", 'start': 363.937, 'duration': 5.684}, {'end': 375.285, 'text': "We're going to have another one for an error reference, and that is because if we get an error,", 'start': 370.121, 'duration': 5.164}], 'summary': 'Creating a react functional component with es7 react snippets and adding use ref references for user input and error handling.', 'duration': 56.984, 'max_score': 318.301, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ318301.jpg'}, {'end': 401.589, 'src': 'embed', 'start': 375.285, 'weight': 4, 'content': [{'end': 380.028, 'text': 'we need to put the focus on that so it can be announced by a screen reader for accessibility.', 'start': 375.285, 'duration': 4.743}, {'end': 384.751, 'text': "Now I'm going to paste in the state for the user field, and we can discuss that.", 'start': 380.348, 'duration': 4.403}, {'end': 388.514, 'text': 'So here is our user state, and this will be tied to the user input.', 'start': 384.871, 'duration': 3.643}, {'end': 389.855, 'text': 'So we have user and set user.', 'start': 388.534, 'duration': 1.321}, {'end': 393.118, 'text': "We've also got valid name and set valid name.", 'start': 390.495, 'duration': 2.623}, {'end': 394.039, 'text': "And that's a Boolean.", 'start': 393.138, 'duration': 0.901}, {'end': 398.085, 'text': 'That is tied to whether the name validates or not.', 'start': 394.46, 'duration': 3.625}, {'end': 401.589, 'text': "And finally, we've got user focus and set user focus.", 'start': 398.525, 'duration': 3.064}], 'summary': 'Focus on accessibility for screen reader announcement and user input state management.', 'duration': 26.304, 'max_score': 375.285, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ375285.jpg'}, {'end': 495.072, 'src': 'heatmap', 'start': 428.192, 'weight': 0.968, 'content': [{'end': 432.295, 'text': 'and also success if we successfully submit the registration form or not.', 'start': 428.192, 'duration': 4.103}, {'end': 434.637, 'text': "Let's scroll up once again for some more room.", 'start': 432.596, 'duration': 2.041}, {'end': 438.261, 'text': "And underneath our state, we're going to apply the useEffect hook.", 'start': 435.138, 'duration': 3.123}, {'end': 444.406, 'text': "The first time we apply it, it's going to be for setting the focus when the component loads.", 'start': 438.821, 'duration': 5.585}, {'end': 446.608, 'text': "Notice there's nothing in the dependency array.", 'start': 444.506, 'duration': 2.102}, {'end': 448.65, 'text': 'So this will only happen when the component loads.', 'start': 446.708, 'duration': 1.942}, {'end': 451.834, 'text': "and we'll set the focus on that username input.", 'start': 449.13, 'duration': 2.704}, {'end': 456.2, 'text': "And of course, to do so, we'll have to reference that user ref on that input.", 'start': 452.114, 'duration': 4.086}, {'end': 460.546, 'text': 'The next use effect is going to be applied to the username.', 'start': 456.821, 'duration': 3.725}, {'end': 462.528, 'text': 'And this is where we validate the username.', 'start': 460.646, 'duration': 1.882}, {'end': 465.532, 'text': 'So notice now the user state is in the dependency array.', 'start': 462.588, 'duration': 2.944}, {'end': 470.296, 'text': 'So anytime it changes, it will check the validation of that field.', 'start': 466.033, 'duration': 4.263}, {'end': 478.541, 'text': "I'm defining it with result so I can log result to the console and show whether we've got true or false and what the user state is.", 'start': 470.876, 'duration': 7.665}, {'end': 489.888, 'text': "You could actually just put this much the user regx test where you're testing the user state against the regx that we created and put it right here inside the set valid name.", 'start': 479.021, 'duration': 10.867}, {'end': 495.072, 'text': "And you could do all of this in one line if we didn't need that result to log to the console.", 'start': 489.928, 'duration': 5.144}], 'summary': 'Using useeffect hook to set focus and validate username.', 'duration': 66.88, 'max_score': 428.192, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ428192.jpg'}, {'end': 465.532, 'src': 'embed', 'start': 438.821, 'weight': 2, 'content': [{'end': 444.406, 'text': "The first time we apply it, it's going to be for setting the focus when the component loads.", 'start': 438.821, 'duration': 5.585}, {'end': 446.608, 'text': "Notice there's nothing in the dependency array.", 'start': 444.506, 'duration': 2.102}, {'end': 448.65, 'text': 'So this will only happen when the component loads.', 'start': 446.708, 'duration': 1.942}, {'end': 451.834, 'text': "and we'll set the focus on that username input.", 'start': 449.13, 'duration': 2.704}, {'end': 456.2, 'text': "And of course, to do so, we'll have to reference that user ref on that input.", 'start': 452.114, 'duration': 4.086}, {'end': 460.546, 'text': 'The next use effect is going to be applied to the username.', 'start': 456.821, 'duration': 3.725}, {'end': 462.528, 'text': 'And this is where we validate the username.', 'start': 460.646, 'duration': 1.882}, {'end': 465.532, 'text': 'So notice now the user state is in the dependency array.', 'start': 462.588, 'duration': 2.944}], 'summary': 'Using useeffect to set focus on username input and validate username.', 'duration': 26.711, 'max_score': 438.821, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ438821.jpg'}, {'end': 639.144, 'src': 'embed', 'start': 616.364, 'weight': 3, 'content': [{'end': 624.669, 'text': "So now that we've got our section for the JSX, I'm going to tab in and paste in what will hold an error if an error exists.", 'start': 616.364, 'duration': 8.305}, {'end': 626.431, 'text': "So let's look at what this is.", 'start': 625.149, 'duration': 1.282}, {'end': 629.794, 'text': "It's a paragraph, and it will be displayed at the top of the form.", 'start': 626.491, 'duration': 3.303}, {'end': 634.499, 'text': "Here we've got our error ref created with useRef, and now we've got a class name.", 'start': 630.515, 'duration': 3.984}, {'end': 639.144, 'text': 'So if the error message exists, this is the error message state.', 'start': 634.959, 'duration': 4.185}], 'summary': 'Using jsx to display error message at top of form.', 'duration': 22.78, 'max_score': 616.364, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ616364.jpg'}], 'start': 318.301, 'title': 'React component creation and state management', 'summary': 'Discusses creating a react functional component with es7 react snippets, validating user input, and adding state and hooks like useref and useeffect for user input validation and interaction.', 'chapters': [{'end': 353.311, 'start': 318.301, 'title': 'React functional component creation', 'summary': 'Discusses creating a react functional component using es7 react snippets and how to validate user input, mentioning the use of the extension and the key shortcut for creating a component.', 'duration': 35.01, 'highlights': ['The chapter discusses creating a React functional component using ES7 React snippets.', 'It explains how to validate user input in the fields.', "Mentions the use of the extension 'ES7 React snippets' for creating a component.", "Provides a key shortcut 'ctrl alt r' for creating a component."]}, {'end': 658.338, 'start': 353.331, 'title': 'Adding state and hooks to react component', 'summary': 'Covers the addition of state and hooks to a react component, including the use of useref, state for user input validation, applying useeffect hooks for setting focus and validation, and updating the jsx for user interaction.', 'duration': 305.007, 'highlights': ['State for user input and validation with useRef and Boolean values The transcript discusses the state setup for user input, including useRef references and Boolean values for user validation.', 'Application of useEffect hooks for setting focus and validation The chapter explains the application of useEffect hooks to set focus on user inputs and validate username and password fields, including the use of dependency arrays for reactivity.', 'Updating JSX with semantic elements and error handling The transcript details the update of JSX by switching div to section elements for better semantics, and includes the implementation of error handling using useRef and conditional rendering based on error message existence.']}], 'duration': 340.037, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ318301.jpg', 'highlights': ['The chapter discusses creating a React functional component using ES7 React snippets.', "Mentions the use of the extension 'ES7 React snippets' for creating a component.", 'The chapter explains the application of useEffect hooks to set focus on user inputs and validate username and password fields, including the use of dependency arrays for reactivity.', 'The transcript details the update of JSX by switching div to section elements for better semantics, and includes the implementation of error handling using useRef and conditional rendering based on error message existence.', 'State for user input and validation with useRef and Boolean values The transcript discusses the state setup for user input, including useRef references and Boolean values for user validation.']}, {'end': 1092.3, 'segs': [{'end': 753.122, 'src': 'embed', 'start': 726.48, 'weight': 1, 'content': [{'end': 732.682, 'text': "The next is ID, and that's the ID of username, which should match the HTML4 attribute on the label.", 'start': 726.48, 'duration': 6.202}, {'end': 738.564, 'text': 'The next attribute is the ref that we created with useRef, which will allow us to set focus on the input.', 'start': 733.322, 'duration': 5.242}, {'end': 743.189, 'text': 'The next attribute is autocomplete, which we want to set to off,', 'start': 739.324, 'duration': 3.865}, {'end': 748.296, 'text': "because we don't want to see previous values suggested for this field that others may have entered.", 'start': 743.189, 'duration': 5.107}, {'end': 749.878, 'text': 'This is a registration field.', 'start': 748.336, 'duration': 1.542}, {'end': 753.122, 'text': 'It should be a new username, so those suggestions would not help.', 'start': 749.918, 'duration': 3.204}], 'summary': 'Attributes for input field: id, ref, autocomplete=off for new username registration.', 'duration': 26.642, 'max_score': 726.48, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ726480.jpg'}, {'end': 835.956, 'src': 'embed', 'start': 792.286, 'weight': 0, 'content': [{'end': 794.888, 'text': 'And notice these aria attributes still have hyphens.', 'start': 792.286, 'duration': 2.602}, {'end': 799.41, 'text': 'They do not use camel case like the other attributes like autocomplete, for example.', 'start': 794.988, 'duration': 4.422}, {'end': 801.191, 'text': 'And this is fine in React.', 'start': 799.93, 'duration': 1.261}, {'end': 804.172, 'text': 'Aria attributes still use this hyphenated structure.', 'start': 801.331, 'duration': 2.841}, {'end': 811.716, 'text': 'With aria-describedby, this actually lets us provide another element that describes the input field.', 'start': 804.813, 'duration': 6.903}, {'end': 814.898, 'text': 'So a screen reader will read the label first.', 'start': 811.936, 'duration': 2.962}, {'end': 819.462, 'text': 'It will read what type of input the label is addressing.', 'start': 815.338, 'duration': 4.124}, {'end': 824.446, 'text': 'Then it will also read the ARIA invalid, whether it has valid input or not.', 'start': 819.982, 'duration': 4.464}, {'end': 829.53, 'text': 'And then it will jump to the ARIA described by element to give a full description.', 'start': 825.066, 'duration': 4.464}, {'end': 835.956, 'text': 'And this is where we can put in the requirements that our registration form needs and have a screen reader read those.', 'start': 829.63, 'duration': 6.326}], 'summary': 'In react, aria attributes use hyphenated structure, aiding screen readers, such as reading labels and input validity.', 'duration': 43.67, 'max_score': 792.286, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ792286.jpg'}, {'end': 948.28, 'src': 'embed', 'start': 921.462, 'weight': 3, 'content': [{'end': 928.487, 'text': "Okay, now that we've introduced the font awesome icons, we can finish the last little bit of our input for the username.", 'start': 921.462, 'duration': 7.025}, {'end': 937.453, 'text': "So once again, in the label, right after we have username, I'm going to paste in a couple of spans that have font awesome icons in them.", 'start': 928.987, 'duration': 8.466}, {'end': 940.234, 'text': 'And the class name has a ternary for each.', 'start': 937.853, 'duration': 2.381}, {'end': 943.697, 'text': "It's simple for the check, which would be the green check mark.", 'start': 940.775, 'duration': 2.922}, {'end': 948.28, 'text': "So if we have a valid username, we're going to apply the class valid.", 'start': 943.897, 'duration': 4.383}], 'summary': 'Introducing font awesome icons in the username input, using a ternary for valid username check.', 'duration': 26.818, 'max_score': 921.462, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ921462.jpg'}], 'start': 658.338, 'title': 'Creating accessible forms and using font awesome icons in react', 'summary': 'Covers creating accessible forms in react, focusing on aria attributes, ref attribute, and labels, with insights on onfocus and onblur events. it also details integrating font awesome icons for visual cues, including user input interaction and screen reader compatibility.', 'chapters': [{'end': 903.93, 'start': 658.338, 'title': 'Creating accessible form in react', 'summary': 'Discusses creating an accessible form in react, emphasizing the use of aria attributes, ref attribute, and labels to enhance screen reader accessibility, as well as explaining the onfocus and onblur events for user input fields.', 'duration': 245.592, 'highlights': ['The use of aria attributes like aria-invalid and aria-describedby is emphasized to enhance screen reader accessibility, ensuring that the form provides accurate information and instructions (e.g., aria-invalid set to true when component loads).', 'The importance of the ref attribute created with useRef is highlighted, as it allows setting focus on the input, thus aiding in improving accessibility for user input fields.', 'The significance of labels matching the ID of the input and the inclusion of HTML4 attributes is explained, ensuring a clear association between labels and inputs for screen reader users.', 'The onFocus and onBlur events are discussed, indicating how these events are utilized to manage the visibility of instructions for user input fields based on focus and input state, improving the user experience.']}, {'end': 1092.3, 'start': 903.93, 'title': 'Using font awesome icons', 'summary': 'Explains how to integrate font awesome icons into a form for visual cues, including the use of green check marks and red x for valid and invalid input, along with the interaction with user input and screen readers.', 'duration': 188.37, 'highlights': ['The chapter demonstrates the integration of Font Awesome icons into a form for visual cues, such as green check marks and red X for valid and invalid input.', 'It explains the interaction with user input and screen readers, ensuring accessibility for visually impaired users.', 'The use of aria-invalid attribute is mentioned for screen readers to indicate invalid input.']}], 'duration': 433.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ658338.jpg', 'highlights': ['The use of aria attributes like aria-invalid and aria-describedby is emphasized to enhance screen reader accessibility, ensuring that the form provides accurate information and instructions (e.g., aria-invalid set to true when component loads).', 'The importance of the ref attribute created with useRef is highlighted, as it allows setting focus on the input, thus aiding in improving accessibility for user input fields.', 'The significance of labels matching the ID of the input and the inclusion of HTML4 attributes is explained, ensuring a clear association between labels and inputs for screen reader users.', 'The chapter demonstrates the integration of Font Awesome icons into a form for visual cues, such as green check marks and red X for valid and invalid input.']}, {'end': 1462.212, 'segs': [{'end': 1138.247, 'src': 'embed', 'start': 1092.3, 'weight': 0, 'content': [{'end': 1099.311, 'text': "I'm going to go ahead and add the password field by pasting everything in and just discussing the differences, because it's very similar.", 'start': 1092.3, 'duration': 7.011}, {'end': 1101.912, 'text': 'I save and get the proper formatting.', 'start': 1100.211, 'duration': 1.701}, {'end': 1111.158, 'text': 'You can see we have a label that has the exact same logic as far as displaying the check or the red X.', 'start': 1102.432, 'duration': 8.726}, {'end': 1115.621, 'text': "But now we're looking at the password state and valid password instead of the username.", 'start': 1111.158, 'duration': 4.463}, {'end': 1121.162, 'text': 'Now, if I scroll up and look at the input, we have eight attributes instead of 10.', 'start': 1116.081, 'duration': 5.081}, {'end': 1123.303, 'text': "So first, let's discuss the two that are missing.", 'start': 1121.162, 'duration': 2.141}, {'end': 1130.905, 'text': 'Autocomplete is missing because this is a type password, and it will not support the autocomplete setting anyway.', 'start': 1123.923, 'duration': 6.982}, {'end': 1132.105, 'text': 'So that is not there.', 'start': 1131.025, 'duration': 1.08}, {'end': 1138.247, 'text': "We also don't have a reference because we do not want to set the focus on this field when the component loads.", 'start': 1132.465, 'duration': 5.782}], 'summary': 'Updating password field with 8 attributes, 2 missing, due to type password.', 'duration': 45.947, 'max_score': 1092.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ1092300.jpg'}, {'end': 1231.533, 'src': 'embed', 'start': 1205.024, 'weight': 1, 'content': [{'end': 1212.334, 'text': 'In the directions, we once again have the Font Awesome icon with the info circle, and we have our directions here that are clearly spelled out.', 'start': 1205.024, 'duration': 7.31}, {'end': 1217.18, 'text': 'But when we get to listing the allowed special characters, Notice what we have to do.', 'start': 1212.394, 'duration': 4.786}, {'end': 1225.348, 'text': 'We put each one in a span, and we use the aria-label attribute so the screen reader can read the description of each special character.', 'start': 1217.34, 'duration': 8.008}, {'end': 1231.533, 'text': "OK, with those changes made and saved, now let's go back and look at our example again and look at the password field.", 'start': 1225.708, 'duration': 5.825}], 'summary': 'Using font awesome icon with info circle, and aria-label attribute for screen reader accessibility.', 'duration': 26.509, 'max_score': 1205.024, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ1205024.jpg'}, {'end': 1399.192, 'src': 'embed', 'start': 1369.589, 'weight': 3, 'content': [{'end': 1373.673, 'text': "all we're doing as far as the validation of this field is making sure they match.", 'start': 1369.589, 'duration': 4.084}, {'end': 1378.817, 'text': 'So our description just says they must match the first password input field.', 'start': 1374.153, 'duration': 4.664}, {'end': 1387.043, 'text': "Also remember that in our use effect, we're looking at the state of both of these fields, password and match password.", 'start': 1379.237, 'duration': 7.806}, {'end': 1391.046, 'text': "So now let's look at the example and see how it responds because of that.", 'start': 1387.503, 'duration': 3.543}, {'end': 1394.709, 'text': "So I'll resize Visual Studio Code, resize Chrome.", 'start': 1391.586, 'duration': 3.123}, {'end': 1399.192, 'text': 'Once again, open up DevTools, clear out the console.', 'start': 1395.509, 'duration': 3.683}], 'summary': 'Validating field to ensure match with first password input.', 'duration': 29.603, 'max_score': 1369.589, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ1369589.jpg'}], 'start': 1092.3, 'title': 'Password field attributes and validation demo', 'summary': 'Discusses the attributes of a password field, highlighting differences in attributes and covering the logic for displaying password instructions. it also describes the implementation of password validation for a web form, utilizing font awesome icons, aria-label attribute, and state-based validation logic.', 'chapters': [{'end': 1204.763, 'start': 1092.3, 'title': 'Password field attributes', 'summary': "Discusses the attributes of a password field, highlighting the differences in attributes, such as the absence of 'autocomplete' and 'reference', and the inclusion of specific attributes like 'aria-describedby' and 'aria-invalid'. it also covers the logic for displaying password instructions based on the field focus and validity.", 'duration': 112.463, 'highlights': ["The chapter discusses the attributes of a password field, highlighting the differences in attributes, such as the absence of 'autocomplete' and 'reference', and the inclusion of specific attributes like 'aria-describedby' and 'aria-invalid'.", "It explains that the password field has eight attributes, with 'autocomplete' and 'reference' missing due to the field type being password and the absence of focus setting on component load.", 'The logic for displaying password instructions is detailed, emphasizing the conditions for displaying instructions based on field focus and the presence of a valid password.']}, {'end': 1462.212, 'start': 1205.024, 'title': 'Password validation demo', 'summary': 'Describes the implementation of password validation for a web form, utilizing font awesome icons, aria-label attribute, and state-based validation logic, ensuring the display of instructions and validation symbols based on user input.', 'duration': 257.188, 'highlights': ['The implementation utilizes Font Awesome icons and aria-label attribute to ensure accessibility for screen readers, improving user experience and inclusivity.', 'The password field features state-based validation logic, displaying dynamic instructions and validation symbols based on user input, providing real-time feedback to the user.', 'The confirm password field also features state-based validation logic, ensuring that it matches the first password input field, and responds dynamically to changes in the password field, maintaining real-time validation feedback.', 'The validation logic includes the display of green check and red X symbols based on the fulfillment of password requirements and matching of the confirm password field, providing clear visual cues for the user.']}], 'duration': 369.912, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ1092300.jpg', 'highlights': ["The chapter discusses the attributes of a password field, highlighting the differences in attributes, such as the absence of 'autocomplete' and 'reference', and the inclusion of specific attributes like 'aria-describedby' and 'aria-invalid'.", 'The implementation utilizes Font Awesome icons and aria-label attribute to ensure accessibility for screen readers, improving user experience and inclusivity.', 'The password field features state-based validation logic, displaying dynamic instructions and validation symbols based on user input, providing real-time feedback to the user.', 'The confirm password field also features state-based validation logic, ensuring that it matches the first password input field, and responds dynamically to changes in the password field, maintaining real-time validation feedback.']}, {'end': 2224.14, 'segs': [{'end': 1489.43, 'src': 'embed', 'start': 1462.312, 'weight': 5, 'content': [{'end': 1465.914, 'text': "I'm going to scroll to the bottom of the form because we're not quite finished.", 'start': 1462.312, 'duration': 3.602}, {'end': 1469.757, 'text': 'We have three inputs, but we have no way to submit that information.', 'start': 1466.154, 'duration': 3.603}, {'end': 1472.739, 'text': 'So we really need a submit button.', 'start': 1470.297, 'duration': 2.442}, {'end': 1475.881, 'text': "But we don't have to provide type equals submit.", 'start': 1473.419, 'duration': 2.462}, {'end': 1480.324, 'text': "When there's only one button in a form, that's what it is by default.", 'start': 1476.001, 'duration': 4.323}, {'end': 1484.027, 'text': 'So the only attribute that we need to provide is disabled.', 'start': 1480.684, 'duration': 3.343}, {'end': 1489.43, 'text': 'And I want to keep that disabled until we have validated all the fields.', 'start': 1484.507, 'duration': 4.923}], 'summary': 'Need to add a submit button in the form, with the disabled attribute until all fields are validated.', 'duration': 27.118, 'max_score': 1462.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ1462312.jpg'}, {'end': 1534.173, 'src': 'embed', 'start': 1509.973, 'weight': 0, 'content': [{'end': 1516.658, 'text': 'but we can see as soon as one field is invalid, not only do we get the instructions, but the sign up button is disabled.', 'start': 1509.973, 'duration': 6.685}, {'end': 1520.96, 'text': 'All three must be valid in order for the sign up button to be enabled.', 'start': 1516.918, 'duration': 4.042}, {'end': 1527.285, 'text': "Okay, while we're at the bottom of the form and as far as that goes, the bottom of the component here in Visual Studio Code notice,", 'start': 1521.321, 'duration': 5.964}, {'end': 1534.173, 'text': "we have the all registered and sign in link here and we'll put that below the form and it's just a paragraph.", 'start': 1527.285, 'duration': 6.888}], 'summary': 'Invalid field disables sign up button; all 3 fields must be valid to enable it.', 'duration': 24.2, 'max_score': 1509.973, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ1509973.jpg'}, {'end': 1579.901, 'src': 'embed', 'start': 1549.81, 'weight': 1, 'content': [{'end': 1556.311, 'text': "React will give you a warning in the terminal because of it, because this isn't really an actual link that you would need to have.", 'start': 1549.81, 'duration': 6.501}, {'end': 1562.233, 'text': 'So we would put a React router link here to link back to another part of the application with the sign-in form.', 'start': 1556.391, 'duration': 5.842}, {'end': 1568.034, 'text': "Okay, we don't currently have a function that submits our form yet, so I'm going to expand Visual Studio Code.", 'start': 1562.413, 'duration': 5.621}, {'end': 1573.015, 'text': 'We need to scroll back up to our form element where it begins here on our form.', 'start': 1568.354, 'duration': 4.661}, {'end': 1579.901, 'text': "let's go ahead and add the on submit event, because, remember, with only one button we don't need to put an on.", 'start': 1573.735, 'duration': 6.166}], 'summary': 'React warns about non-functional link, adds submit event to form.', 'duration': 30.091, 'max_score': 1549.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ1549810.jpg'}, {'end': 1710.789, 'src': 'embed', 'start': 1684.292, 'weight': 3, 'content': [{'end': 1689.016, 'text': 'that would have the database where we would actually save a user with invalid information.', 'start': 1684.292, 'duration': 4.724}, {'end': 1691.578, 'text': 'okay, so this could be the point in the tutorial where,', 'start': 1689.016, 'duration': 2.562}, {'end': 1705.868, 'text': "if you haven't created a back end to submit this form to and you could do that with my full node.js course and that's actually what i'm going to validate this information against is the rest api that is created in that Node.js course.", 'start': 1691.578, 'duration': 14.29}, {'end': 1707.708, 'text': "So I'll give a link to that below.", 'start': 1706.308, 'duration': 1.4}, {'end': 1710.789, 'text': "But if you haven't done that, this could be where you want to stop.", 'start': 1707.768, 'duration': 3.021}], 'summary': 'Suggests using a node.js course to validate user information against a rest api.', 'duration': 26.497, 'max_score': 1684.292, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ1684292.jpg'}, {'end': 1750.221, 'src': 'embed', 'start': 1728.099, 'weight': 2, 'content': [{'end': 1736.568, 'text': "But here, I'm going to come back to this and actually use Axios to submit to a backend that we've created in that Node.js course.", 'start': 1728.099, 'duration': 8.469}, {'end': 1741.953, 'text': 'And that will allow us to get some different user responses or API responses, I should say,', 'start': 1737.048, 'duration': 4.905}, {'end': 1750.221, 'text': 'and display user messages as far as success or error messages if we get an incorrect response from the API.', 'start': 1742.453, 'duration': 7.768}], 'summary': 'Using axios to submit to a node.js backend for handling user and api responses.', 'duration': 22.122, 'max_score': 1728.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ1728099.jpg'}], 'start': 1462.312, 'title': 'Form submission and integration', 'summary': 'Covers adding a submit button with validations, enabling it after field validation, and using a react router link. it also discusses form submission and backend integration using axios in a react app, emphasizing form validation and api interaction, and showcasing axios usage.', 'chapters': [{'end': 1568.034, 'start': 1462.312, 'title': 'Adding submit button and validations', 'summary': 'Explains adding a submit button to a form, setting it as disabled until all fields are validated, and the need for a react router link instead of a placeholder link.', 'duration': 105.722, 'highlights': ['The sign up button is disabled until all form fields are validated, ensuring that all three fields must be valid for the sign up button to be enabled.', 'The need for a React router link instead of a placeholder link to avoid warnings and to link back to another part of the application with the sign-in form.', 'Explanation of the default behavior of a single button in a form, which is considered as type equals submit by default.']}, {'end': 2224.14, 'start': 1568.354, 'title': 'Form submission and backend integration', 'summary': 'Discusses form submission and backend integration using axios in a react application, covering form validation, asynchronous handling, and api interaction, emphasizing the importance of preventing invalid submissions to the backend and showcasing the use of axios for sending data to the backend.', 'duration': 655.786, 'highlights': ['The chapter discusses form submission and backend integration using Axios in a React application. It covers the process of handling form submission and integrating with a backend using Axios, emphasizing the key concepts of the tutorial.', 'The tutorial highlights the importance of preventing invalid submissions to the backend. It emphasizes the need to prevent invalid data submissions to the backend to avoid storing inaccurate information in the database.', 'The use of Axios for sending data to the backend is showcased in the tutorial. The tutorial demonstrates the use of Axios to send data to the backend, showcasing its advantages over fetch, such as automatic JSON parsing.']}], 'duration': 761.828, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ1462312.jpg', 'highlights': ['The sign up button is disabled until all form fields are validated, ensuring that all three fields must be valid for the sign up button to be enabled.', 'The need for a React router link instead of a placeholder link to avoid warnings and to link back to another part of the application with the sign-in form.', 'The chapter discusses form submission and backend integration using Axios in a React application. It covers the process of handling form submission and integrating with a backend using Axios, emphasizing the key concepts of the tutorial.', 'The tutorial highlights the importance of preventing invalid submissions to the backend. It emphasizes the need to prevent invalid data submissions to the backend to avoid storing inaccurate information in the database.', 'The use of Axios for sending data to the backend is showcased in the tutorial. The tutorial demonstrates the use of Axios to send data to the backend, showcasing its advantages over fetch, such as automatic JSON parsing.', 'Explanation of the default behavior of a single button in a form, which is considered as type equals submit by default.']}, {'end': 2675.838, 'segs': [{'end': 2266.869, 'src': 'embed', 'start': 2224.18, 'weight': 0, 'content': [{'end': 2232.509, 'text': 'But this would be our point to go ahead and set the success to true, so we can see our success page in this tutorial.', 'start': 2224.18, 'duration': 8.329}, {'end': 2242.555, 'text': "this would also be a good place and i'll just note this here with a comment to clear the input fields out of the registration field if you wanted to.", 'start': 2232.509, 'duration': 10.046}, {'end': 2247.499, 'text': "so this would be where i'd do that and of course you would just set the state back to empty strings.", 'start': 2242.555, 'duration': 4.944}, {'end': 2254.663, 'text': "Now you could use your own logic as far as a conditional in the error block, but I'll put in a few standard ones that you might expect to get.", 'start': 2247.859, 'duration': 6.804}, {'end': 2262.907, 'text': "So the first one will start with an if statement and basically we'll have if, no error response and we'll use optional chaining,", 'start': 2254.803, 'duration': 8.104}, {'end': 2264.968, 'text': "because that means we haven't heard from the server at all.", 'start': 2262.907, 'duration': 2.061}, {'end': 2266.869, 'text': "Maybe we've lost our internet connection.", 'start': 2265.028, 'duration': 1.841}], 'summary': 'Setting success to true, clearing input fields, and handling error conditions.', 'duration': 42.689, 'max_score': 2224.18, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ2224180.jpg'}, {'end': 2389.801, 'src': 'heatmap', 'start': 2311.024, 'weight': 2, 'content': [{'end': 2317.254, 'text': "So we can say error message once again, and we'll just say username taken.", 'start': 2311.024, 'duration': 6.23}, {'end': 2324.973, 'text': 'And finally, another else we might provide here is just a generic error.', 'start': 2319.116, 'duration': 5.857}, {'end': 2330.997, 'text': "So we could say set error message and we'll just say registration failed.", 'start': 2325.033, 'duration': 5.964}, {'end': 2332.898, 'text': 'Once again these error messages.', 'start': 2331.457, 'duration': 1.441}, {'end': 2337.881, 'text': "I don't feel like need to point to any one specific field other than the username taken,", 'start': 2332.898, 'duration': 4.983}, {'end': 2341.883, 'text': 'because we already highlight the validation as the form is filled out.', 'start': 2337.881, 'duration': 4.002}, {'end': 2349.008, 'text': 'Finally, after the conditional logic here for the errors and what message we want to display,', 'start': 2342.504, 'duration': 6.504}, {'end': 2356.151, 'text': 'you want to set the focus on that error field for screen readers and save.', 'start': 2349.008, 'duration': 7.143}, {'end': 2363.296, 'text': 'okay, with our registration form complete, including using axios, we are ready to test it out with our development back end.', 'start': 2356.151, 'duration': 7.145}, {'end': 2368.24, 'text': 'and what i want to point out is, if you do have this from my node.js course,', 'start': 2363.296, 'duration': 4.944}, {'end': 2381.676, 'text': 'you will need to add localhost port 3000 that the react application is running on into the allowed origins or cores will not let you access this backend because we did put in those security checks.', 'start': 2368.24, 'duration': 13.436}, {'end': 2389.801, 'text': 'Okay, now we can type npm run dev for this backend instance and it will launch the Node.js server,', 'start': 2382.216, 'duration': 7.585}], 'summary': 'Registration form completed with error handling and focus set for screen readers.', 'duration': 78.777, 'max_score': 2311.024, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ2311024.jpg'}, {'end': 2469.249, 'src': 'embed', 'start': 2441.496, 'weight': 6, 'content': [{'end': 2445.578, 'text': "So now, I'm going to go ahead and resubmit and see what error we get.", 'start': 2441.496, 'duration': 4.082}, {'end': 2447.299, 'text': 'Registration failed.', 'start': 2446.079, 'duration': 1.22}, {'end': 2448.44, 'text': "Well, that's great, too.", 'start': 2447.499, 'duration': 0.941}, {'end': 2451.381, 'text': "So we got a response, but it just didn't work out.", 'start': 2448.52, 'duration': 2.861}, {'end': 2454.902, 'text': "Now let's go back to the code and, of course, fix our endpoint.", 'start': 2451.581, 'duration': 3.321}, {'end': 2457.243, 'text': "So we'll need to add the RBAC.", 'start': 2455.663, 'duration': 1.58}, {'end': 2461.105, 'text': "Let me try to think of a name I haven't already used.", 'start': 2458.404, 'duration': 2.701}, {'end': 2466.848, 'text': 'And here we can go Dave, D, Dave.', 'start': 2462.926, 'duration': 3.922}, {'end': 2467.528, 'text': "That'll work.", 'start': 2466.968, 'duration': 0.56}, {'end': 2469.249, 'text': 'And I will submit.', 'start': 2468.268, 'duration': 0.981}], 'summary': 'Registration failed, fixing endpoint, adding rbac, and resubmitting.', 'duration': 27.753, 'max_score': 2441.496, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ2441496.jpg'}, {'end': 2658.462, 'src': 'embed', 'start': 2628.641, 'weight': 7, 'content': [{'end': 2632.284, 'text': 'As soon as I change this, though, ARIA invalid is true.', 'start': 2628.641, 'duration': 3.643}, {'end': 2635.546, 'text': 'So it is also responding to what we do in that field.', 'start': 2632.464, 'duration': 3.082}, {'end': 2638.828, 'text': 'And all of these things are needed for form accessibility.', 'start': 2636.066, 'duration': 2.762}, {'end': 2644.691, 'text': "Again, if you like, the pace of this tutorial, where I didn't type out every little individual digit,", 'start': 2639.268, 'duration': 5.423}, {'end': 2649.314, 'text': "please like and let me know in the comments below, so I'll know to make more tutorials like this.", 'start': 2644.691, 'duration': 4.623}, {'end': 2652.236, 'text': "and I'll also give a link to that Node.js course.", 'start': 2649.734, 'duration': 2.502}, {'end': 2658.462, 'text': "so if you haven't already created a backend that could interact with this React form, you'll learn how to in that course.", 'start': 2652.236, 'duration': 6.226}], 'summary': 'Aria invalid is true, needed for form accessibility. tutorial feedback is requested.', 'duration': 29.821, 'max_score': 2628.641, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ2628641.jpg'}], 'start': 2224.18, 'title': 'Handling registration errors and custom validation in react', 'summary': 'Covers handling registration errors by setting success to true, clearing input fields, and providing different error messages based on server response, including a status 409 for existing username. it also covers creating a registration form with custom validation in react, testing it with a development back end, including security checks and endpoint fixes, and demonstrating the importance of accessibility features, such as screen readers and aria attributes.', 'chapters': [{'end': 2337.881, 'start': 2224.18, 'title': 'Handling registration errors', 'summary': 'Covers handling registration errors by setting success to true, clearing input fields, and providing different error messages based on server response, including a status 409 for existing username.', 'duration': 113.701, 'highlights': ['Setting success to true to display success page in the tutorial', 'Clearing input fields in the registration form to reset state', "Providing different error messages based on server response, including 'no server response', 'username taken', and 'registration failed'", 'Using optional chaining to handle different error scenarios, such as lost internet connection or server response status']}, {'end': 2675.838, 'start': 2337.881, 'title': 'Custom validation in react with accessibility features', 'summary': 'Covers the process of creating a registration form with custom validation in react, testing it with a development back end, including security checks and endpoint fixes, and demonstrating the importance of accessibility features, such as screen readers and aria attributes.', 'duration': 337.957, 'highlights': ['Demonstrates the process of creating a registration form with custom validation in React. Creation of a registration form with custom validation, using axios for form submission.', 'Emphasizes the significance of adding localhost port 3000 to the allowed origins or cores for accessing the backend and the need to run the Node.js server. Importance of adding localhost port 3000 to allowed origins for backend access, launching the Node.js server for form submissions.', "Illustrates the testing process, including encountering errors such as 'username taken' and 'registration failed,' fixing an endpoint, and achieving successful sign-in. Encountering errors like 'username taken' and 'registration failed,' fixing the endpoint for successful sign-in.", 'Demonstrates the importance of accessibility features, such as screen readers and ARIA attributes, for form validation and user interaction. Importance of accessibility features like screen readers and ARIA attributes in form validation and interaction.']}], 'duration': 451.658, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/brcHK3P6ChQ/pics/brcHK3P6ChQ2224180.jpg', 'highlights': ['Setting success to true to display success page in the tutorial', 'Clearing input fields in the registration form to reset state', "Providing different error messages based on server response, including 'no server response', 'username taken', and 'registration failed'", 'Using optional chaining to handle different error scenarios, such as lost internet connection or server response status', 'Demonstrates the process of creating a registration form with custom validation in React', 'Emphasizes the significance of adding localhost port 3000 to the allowed origins or cores for accessing the backend and the need to run the Node.js server', "Illustrates the testing process, including encountering errors such as 'username taken' and 'registration failed,' fixing an endpoint, and achieving successful sign-in", 'Demonstrates the importance of accessibility features, such as screen readers and ARIA attributes, for form validation and user interaction']}], 'highlights': ['The tutorial emphasizes creating a React registration form with custom validation and accessibility features, targeting intermediate users.', 'The tutorial uses minimal dependencies and prefers semantic HTML elements for better accessibility.', 'The discussion centers on creating self-contained components and importing hooks such as use ref, state, and effect for the form creation.', 'The tutorial walks through the process of installing Font Awesome dependencies using NPM.', 'The chapter discusses creating a React functional component using ES7 React snippets.', 'The chapter explains the application of useEffect hooks to set focus on user inputs and validate username and password fields.', 'The use of aria attributes like aria-invalid and aria-describedby is emphasized to enhance screen reader accessibility.', 'The chapter demonstrates the integration of Font Awesome icons into a form for visual cues, such as green check marks and red X for valid and invalid input.', 'The sign up button is disabled until all form fields are validated, ensuring that all three fields must be valid for the sign up button to be enabled.', 'The chapter discusses form submission and backend integration using Axios in a React application.', 'The tutorial highlights the importance of preventing invalid submissions to the backend and the use of Axios for sending data to the backend.', 'Setting success to true to display success page in the tutorial.', 'Clearing input fields in the registration form to reset state.', "Providing different error messages based on server response, including 'no server response', 'username taken', and 'registration failed'.", 'Using optional chaining to handle different error scenarios, such as lost internet connection or server response status.', "Illustrates the testing process, including encountering errors such as 'username taken' and 'registration failed,' fixing an endpoint, and achieving successful sign-in.", 'Demonstrates the importance of accessibility features, such as screen readers and ARIA attributes, for form validation and user interaction.']}