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

today we're going to create a react registration form with custom validation for a username a password and a password confirmation field one key feature that sets this tutorial apart is how we will consider accessibility throughout the creation of the registration form let's get started [Music] hello and welcome hi i'm dave let's create a react registration form with custom validation and accessibility features 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 now this tutorial is more intermediate level than it is beginner ideally you will have already completed my react for beginners course or a similar course for getting started with react now i'm not going to explain all the basics of the react hooks i use or go into detail about the basic setup we'll just keep moving and i'll make sure to share a link to the source code in the description too and if you like the style and pace of this video make sure to like the video and comment below so i'll know to make more like it okay in visual studio code i've already cleared out all of the unnecessary files that we usually see over here in the file tree when you create a react app and this is the index js no surprises here very minimal and then when we look at the package json you can see i've even uninstalled any dependencies that we won't be using so i've just got react react dom and react scripts at this time we can add in some more as well and then when we look at the app js you can see i've already created a register component and i'm importing that and that's what we're putting here in the jsx also i have changed the default div to a main element i prefer semantic html elements still left the class name app and that's all of the changes to the app file so really we're creating a self-contained component today and that is going to be in our register js so let's start by importing the hooks we're going to use i'll type import and use ref and press tab and from there it completes the import statement but we can add a couple of more hooks here so not just use ref we're going to use state and use effect notice how my code is wrapping lines here if that's not doing it for you and going off the screen instead you can press alt z to get visual studio code to wrap those lines for you okay now that we've imported the three hooks that we're going to use let's also add some other imports from font awesome but first we'll need to install that font awesome dependency so if we go to chrome i'm going to open up the font awesome page talking about react and font awesome will provide svgs as react components when we install font awesome correctly here with npm so we can look at the three dependencies we need they're showing npmi or npm install you can just use i it means the same thing they're also showing dash dash save which you shouldn't need if you have a current version of npm and node and then you've got the three different dependencies listed right here we can actually do all three of those in one line so let's go back to visual studio code and do that of course i'll put a link to that page in the description of this video so in visual studio code i'm going to just expand the window i'm going to open a new terminal with control and the backtick you can also do that from the terminal menu and choose new terminal once you do that i'm just going to paste in those dependencies it looks like i missed the n when i copied so i need to go to the beginning of my line here but notice all three dependencies are in the same line and it should start with npmi once you have all of that entered you should just be able to press enter and install these dependencies and when they finish installing i'll come back to the tutorial and continue okay font awesome has finished installing i'll close the terminal window let's quickly look at the package json and we can see those three dependencies added here in our package json so we've confirmed that we've installed those correctly and now with the new import statement i'll type import and i'm going to type f a and then with a capital c check and press tab and it completes that import now i want two other icons as well so i also want f a times and fa info circle there we go got all three now we also need to import the font awesome icon component so here we'll type font awesome icon and press tab and it will complete that import as well now we've got all we need from font awesome okay i'm going to give an extra line here and paste in two reg x statements here so we've got a user regex that we're going to validate the username with and a password regex that we're going to validate the password with the user regex says it must start with a lower or uppercase letter after that it must follow be followed by anywhere from 3 to 23 characters that can be lower or upper case letters digits hyphens or underscores and any of that will work so overall it must be 4 to 24 characters now the password regex requires at least one lower case letter one uppercase letter one digit and one special character and it can be anywhere from eight to twenty four characters so that's what we will be validating the user input with in those fields now we're ready to go ahead and create our component i'm going to press ctrl alt and the letter r you might try typing this directly into your file as well and do underscore r a f c e press enter and we get a react functional component now i've got es7 react snippets installed to do this it's an extension that you can search for over here under extensions i'll also provide a link to that in the description now that we've got our functional component which if you don't have that extension you may have to type out we can go ahead and start adding some information there 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 going to start by putting in two use ref references 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 we're going to have another one for an error reference and that is because if we get an error we need to put the focus on that so it can be announced by a screen reader for accessibility now i'm going to paste in the state for the user field and we can discuss that so here is our user state and this will be tied to the user input so we have user and set user we've also got valid name and set valid name and that's a boolean that is tied to whether the name validates or not and finally we've got user focus and set user focus and this is also a boolean and it will be whether we have focus on that input field or not and now that you know what those three are for i'll go ahead and paste in the state for the other two fields and you can see that's really exactly the same and we have the state for the same three purposes for the password and the matching password fields and finally we're going to add some state for a possible error message if an error exists and also success if we successfully submit the registration form or not let's scroll up once again for some more room and underneath our state we're going to apply the use effect hook the first time we apply it it's going to be for setting the focus when the component loads notice there's nothing in the dependency array so this will only happen when the component loads and will set the focus on that username input and of course to do so we'll have to reference that user ref on that input the next use effect is going to be applied to the user name and this is where we validate the user name so notice now the user state is in the dependency array so anytime it changes it will check the validation of that field 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 you could actually just put this much the user regex test where you're testing the user state against the reg x that we created and put it right here inside the set valid name and you could do all of this in one line if we didn't need that result to log to the console i'm going to scroll up again for a little more room and now i'll paste in the use effect for the password notice it's a little different although it starts out the same we once again have result we're testing against the password regex and the password state now and we have the password state in the dependency array and we're also logging those just to see what we get there and when it's valid and when it's not but now the confirmation is defined with match and we're comparing password to the match password state which will also return a boolean and we're setting whether we have a valid match or not the nice thing about having both of these inside the same use effect is that anytime one of them changes the valid match will also check whether we change that field or the password field and that allows it to be in sync with the password field at all times so you've got password and match password in the dependency array and both of these are set within the same use effect and finally we're going to set one more use effect and it is for the error message and if we display an error message of course we want it to be available but then anytime the user changes the information changes the state of one of these three state pieces here inside of the dependency array then we will go ahead and clear out the error message because the user has read that error message and now they are adjusting by making changes okay let's scroll up and we're ready to work on the jsx now and the first thing we'll do is switch this div to a section element once again using a more semantic element than div i'm going to save as well now nothing will change on our page and once again we're looking at an example app over here we haven't actually added any jsx to the register form we're currently creating but this is our goal of what it will look like i'm not going over the css you could style it your own way or you could look at my css that will be available in the source file i will describe some of the classes though 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 so let's look at what this is it's a paragraph and it will be displayed at the top of the form here we've got our error ref created with use ref and now we've got a class name so if the error message exists this is the error message state then we use a ternary statement and we apply the class error message which will display the error message otherwise we apply the class off-screen which will take this whole paragraph positioned absolutely way off the screen but it will still be available to screen readers instead of display none which would remove it from the document now this aria live attribute is set to assertive and that means when we set the focus on this element that has the ref of error ref it will be announced with a screen reader and that is important if an error exists and then here we simply display the error message which is the error message state let's follow this error message paragraph with an h1 that will give the title for our form and that is simply register and now let's create the form after that it will not have an action attribute though so we can remove that and now we'll put our inputs inside the form each input should have a label element so let's go ahead and provide the label and notice each label will have an html4 attribute that needs to match the id of the input this will be the username value and that's the id we will give the username input so here for the label then we can just say username now i'm going to scroll up and paste the input underneath and describe each attribute because it has several i'll save to get better formatting and the first attribute is type text which we absolutely need the next is id and that's id of username which should match the html4 attribute on the label the next attribute is the ref that we created with use ref which will allow us to set focus on the input the next attribute is autocomplete which we want to set to off because we don't want to see previous values suggested for this field that others may have entered this is a registration field it should be a new username so those suggestions would not help the on change here this function will provide the event and then we'll set the user state so this ties the input to the user state this input is also required and now two important attributes for accessibility here we have aria invalid which will be set to true when the component loads because we will not have a valid name notice this is a ternary statement so if we do have a valid username that has passed our validation this will be set to false this lets a screen reader announce whether this input field needs adjusted before the form is submitted so that definitely helps accessibility the next one is arya described by and notice these aria attributes still have hyphens they do not use camel case like the other attributes like autocomplete for example and this is fine in react aria attributes still use this hyphenated structure with arya described by this actually lets us provide another element that describes the input field so a screen reader will read the label first it will read what type of input the label is addressing then it will also read the aria invalid whether it has valid input or not and then it will jump to the aria described by element to give a full description and this is where we can put in the requirements that our registration form needs and have a screen reader read those with on focus we're simply setting if the user input field has focus we're setting that to true and then on blur of course that's when you leave the user input field we're setting the focus defaults so now let's scroll up for some more room again but we see our aria described by references an element with the id of user id note uid note so i will paste that in and it's a paragraph save again for better formatting and here's our paragraph with the id uid note and once again a class name so we're saying if user focus is true and if the user state exists in other words if it's not empty if we have an empty field we don't want to display these instructions immediately when the form loads we want to wait until at least one character is typed and then if there is not a valid name if there's a valid name of course we'll go ahead and hide the instructions as well but if we meet all of these requirements the instructions are shown and otherwise this is also set to off-screen it is not set to display none but it is taken off the screen with an absolute position in the css and that still allows these directions to be available to screen readers notice i'm also pulling in one of the font awesome icons and this is a font awesome icon component and we just specifically say which icon to use then and we'll see how that shows up in the form as well okay now that we've introduced the font awesome icons we can finish the last little bit of our input for the username 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 and the class name has a ternary for each it's simple for the check which would be the green check mark so if we have a valid username we're going to apply the class valid otherwise we're going to go ahead and hide this icon now the hide will set the display to none and that's okay because this is essentially visually for us if we're not using a screen reader if we're using a screen reader that's what the aria invalid attribute was for so this is just giving us a visual cue that is very similar to the aria invalid attribute now for the red x it's a little more complicated than just checking if we have a valid name certainly if we have a valid name we want to hide the red x but also if the user state does not exist so again if the field is empty we also want to hide that red x otherwise we'll display it with by applying the class name invalid so after we've made these changes and saved all of this let's look at our form and see how this works i'll expand and i'm going to go ahead and show the console as well i'll clear out what we've currently got in there and now i've got focus on the username notice the instructions are not displaying and we do not have a green check or a red x because we don't want that to happen when the form loads we want our form to look just like this very nice and clean but as soon as i type a letter now we get the directions because the user state exists and there is our font awesome icon that's the info circle and we have the red x up here in the label as well and we've got false and d in the console and as soon as i type another letter we get false nda so this will continue to display like this until we actually meet the requirements and then when i get the fourth letter in there it's now true and this username is acceptable and the directions have hid themselves and we have a green check mark now likewise if i delete everything in the field and we have an empty input the directions are gone and we do not have a green check or red x either one so that is how our user input works okay i'm going to close the dev tools and resize chrome again and i'm also going to resize visual studio code and go ahead and press ctrl b to hide that file tree we don't really need it we're just working on this one component so i'm going to scroll down now and after our directions or our instructions for that username 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 i save and get the proper formatting you can see we have a label that has the exact same logic as far as displaying the check or the red x but now we're looking at the password state and valid password instead of the username now if i scroll up and look at the input we have eight attributes instead of 10 so first let's discuss the two that are missing autocomplete is missing because this is a type password and it will not support the autocomplete setting anyway so that is not there we also don't have a reference because we do not want to set the focus on this field when the component loads otherwise we have the same attributes so type is not text its password we have an id of password that matches the id here in the label of password the on change once again ties this to state and now we're setting the password state it is a required field we have an aria invalid attribute and it also has a ternary statement in there looking at the valid password we have an aria described by and that's looking for the id password note and we again have on focus and on blur to see if we are in that field or not now let's look at this password that describes the directions for the password field with aria described by because it's just a little more complicated once again we're looking to see if there's focus on the field but we don't have to see if a password exists because we want it to display as soon as there is focus on this field it will not display at load time because we do not set the focus then we also look to make sure there is not already a valid password if there is a valid password we want to hide those instructions 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 but when we get to listing the allowed special characters notice what we have to do 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 okay with those changes made and saved now let's go back and look at our example again and look at the password field i'm going to press ctrl shift and i to open the dev tools clear out what we have in the console and now when i put the focus on the password we instantly get the directions and we see those directions there i can type an exclamation mark and now of course we have the red x now that we started typing characters because it doesn't work we don't want the red x while it's empty but if i type an exclamation mark capital letter lowercase letter and now five digits one more there we go and now it meets the requirements and we get a green check and the instructions have hidden themselves but if we go ahead and delete one we once again get the instructions and the red x so this is also working as expected and we can see the true and the password that has been entered over here in the console okay we'll once again close dev tools resize chrome resize visual studio code and give a little space underneath that last description and paste in what we have for the matching confirmation of the password i'll save again to get the auto formatting and as we see the label has confirmed password and once again the same logic for the font awesome icons and i say same logic but there is a slight difference before we were just looking for a valid match but really here the matching password must have something in it because if we just left it blank and it could be a valid match it would show the green check when both fields were empty so you have to have not only a valid match but the matching password state does need to exist now when we come to showing the red x it is the same logic as before if we scroll up and look at the input we have the same eight attributes as the password field but this is the confirm password and this id once again matches the html4 attribute of the label and then aria described by points to the confirm note and here we're looking at valid match instead of valid password in the aria invalid attribute the confirm node id points to the description and it is much simpler than the password because we really don't need to check everything that we checked the password for we're already doing that validation there all we're doing as far as the validation of this field is making sure they match so our description just says they must match the first password input field also remember that in our use effect we're looking at the state of both of these fields password and match password so now let's look at the example and see how it responds because of that so i'll resize visual studio code resize chrome once again open up dev tools clear out the console and now in confirm password once it gets focused we see the instructions start typing the password and here i'm logging the password from the password field in the dev tools instead of the confirm password so we're just waiting until this matches we'll probably see true over here the whole time and once it matches the instructions are hidden and we do not have a red x and if i delete one character then we get the red x and the instructions come back but now watch what happens if i delete a character from the password field now it's false and we do not have a password that matches the validation here but notice confirm password also responded to that because it now shows a red x because it does not match the password field if we go ahead and add that character back then they both change back to green so confirm password will always respond to changes in password as well okay closing dev tools resizing chrome resizing visual studio code again i'm going to scroll to the bottom of the form because we're not quite finished we have three inputs but we have no way to submit that information so we really need a submit button but we don't have to provide type equals submit when there's only one button in a form that's what it is by default so the only attribute that we need to provide is disabled and i want to keep that disabled until we have validated all the fields so if we do not have a valid name or we do not have a valid password or we do not have a valid match then disabled is true otherwise it's false and then we can see we just put the text sign up on the button so i'll save that and if we go back we don't really need to expand everything 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 all three must be valid in order for the sign up button to be enabled 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 we have the already registered and sign in link here and we'll put that below the form and it's just a paragraph but i also put a note in because if we expanded this in a full application this would be a react router link this is just a placeholder link so right now if you launch this application or this project with just this placeholder link in here 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 so we would put a react router link here to link back to another part of the application with the sign in form okay we don't currently have a function that submits our form yet so i'm going to expand visual studio code we need to scroll back up to our form element where it begins here on our form and let's go ahead and add the on submit event because remember with only one button we don't need to put an on click on that button it creates a submit event for the form because it's the only button in the form and so here we'll just put handle submit and then we'll need to create this function above so let's scroll on up here just underneath this last use effect and we'll define handle submit set it equal to a function it's going to be an async function and inside here with the event that it will get by default you don't need to pass the event here in the on submit for the form we'll just say e dot prevent default and save now the first thing to consider in this function that we're creating for submission is the only thing preventing or really enforcing our regex validation is that submit button and that could actually be hacked if somebody knew javascript they could just go into the console grab that button through a selection and enable it and so if you want to be very cautious of course 99 percent of people wouldn't do that maybe even 99. 9 percent but you could put in something that looks a lot like this and here we're just going to validate the information in the state of the user and the password again so if for some reason the button was enabled and it allowed somebody to submit the state that wasn't passing anyway it wasn't passing our validation checks we're just checking those again and if either one of those are false we're setting the error message to invalid entry of course they would know which one was an invalid entry because our validation would be showing that on the form and then we're just returning so we don't submit anything to our backend that would have the database where we would actually save a user with invalid information okay so this could be the point in the tutorial where 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 so i'll give a link to that below but if you haven't done that this could be where you want to stop and you might just want to console. log the user state and the password state and then you might set the success and just set it to true right here and then we could do something with the jsx to show a successful message but here i'm going to come back to this and actually use axios to submit to a back-end that we've created in that node. js course and that will allow us to get some different user responses or api responses i should say and display user messages as far as success or error messages if we get an incorrect response from the api so if you are not going to go ahead and create that back end as well to check this against let's go ahead and display something for the success first so down here in the jsx i'm going to scroll we'll start with a fragment and there we've got a closing fragment which i'll add at the end we won't use right now so just a fragment there we got it again two three there we go and now here i'm going to paste the beginning of a ternary statement so we're going to check to see if we have success state and if we do this would be the ternary here to show true we'll display this section instead that says success it has another placeholder link that should be turned into a react router link that would link to the sign in once again and then if it's false we'll display this section we've created with our registration form so at the very end i need to go ahead and close out this ternary and then i need to provide that closing fragment so we'll scroll all the way down to add that to our page okay i believe we're at the right spot we can close out the ternary and i need to add a curly brace for the statement and i think that's good let's oh we need the closing fragment too there we go now we should be good we'll save and get better formatting there and now we'll go ahead and try submitting a form and we'll have to launch this application that we've created instead of the example one but if we submit that form i'll scroll back to where we are in the code here here we are with the handle submit it should just go ahead and log the user and password to the console set success to true and then we should see this section instead of our registration form okay i'm opening up a terminal i'm going to type npm start to go ahead and launch the application that we've created okay the application we've created has launched i'm going to expand chrome i'm going to open up devtools as well go ahead and clear out anything we have there and we'll need to enter in valid input so we can submit the form three valid inputs the sign up button is now enabled i'm going to press enter and we got our success because the success state is now true and there is our placeholder link that should go back to the sign in page and over here in the console we now logged the username and the password that would be submitted to a backend now that we know our test application is working let's go ahead and resize and go back to the code and in visual studio code i'm going to stop the application because we need to install one more dependency and this dependency is axios as you can see i'm typing in the terminal npm i axios so i'll press enter and as soon as that installs i'll come back to the tutorial okay axios has completed installing i'll close the terminal and then i'm going to show the file tree we can check the package json to make sure axios is there and there it is so i'll close the package json file now inside the source folder i want to create another folder i'm going to name this api and then inside the api folder i'm going to create a new file and i'm just going to name it axios.

js inside the axios file i'm going to paste this in but i'm importing axios from axios from there i can say export default axios. create and set a base url and this allows me to set the base url for the full application so i don't have to continue to retype this elsewhere because we'll import axios from this file into the other components that we would use so here i've got http localhost 3500 and that's because i'm going to run my development backend from my node. js course in another instance of visual studio code and it's going to be at port 3500.

okay with this complete let's save that file we can close it out we'll go back to register and we need to go all the way to the top because now we'll need to import axios from that file so let's do that here we'll type import axios from and that'll be dot slash api slash axios there we go and we can save right there and now let's scroll back down to our handle submit function where we will use axios i'm going to remove the console log in the set success for now because what we really want here is a try catch block so there's our try and now we'll have a catch that could have a possible error inside the try block we're going to define a response that we should get from axios so we'll set the response equal to await axios dot post now remember our handle submit is an async function so we can use a weight inside of that now inside the post for axios we need to provide a register url and so let's define that we have our base url but let's go ahead and provide the register url and let's set that with a constant up here at the top near where we had our regex statements so we'll say const register underscore url we're just going to set this equal to slash register which would be the end point for our registration in our backend api now we can scroll back down and inside this handle submit function let's go ahead and provide our register underscore url after that we need to provide the payload essentially the data we're sending so it's json. stringify and inside here i'm going to destructure two objects really we've got user and password i said objects two properties but if this is because our backend by the way is expecting a property named user in a property named pwd for password if we had named our state username we would have to do this because the back end is still expecting a user property and not a username property but since they have the same name we can just say user likewise for password if we had named it password maybe we would be like this but since it has the same name as the property that the back end will be looking for we can just put it in like that and it will be destructured on the back end okay a third parameter now needs to be added to post and so here this is an object and inside this object we need to specify headers and headers has its own object so here we'll say content dash type i'll set this to application json and now after headers we provide a comma and we also need to say with credentials and set that to true no comma needed there as we finish the object and now i'll actually add a return here so we know we're finished with the await axios post i enjoy using axios instead of fetch because we don't have to manually change the response to json it already happens so here we could just look for the data that we'll get back from axios and that is response. data it's saved in the data property so that would be the response from the server but if we were looking for something else it could also be in there and for example in the back end that we created in my node.

js course we get an access token back so we could log that or if you want to look at the full response object you just need to use json stringify so you don't get object object in the console and there you can pass in the response that you want to see as well i'm going to scroll up just a little bit 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 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 so this would be where i do that and of course you would just set the state back to empty strings 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 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 because that means we haven't heard from the server at all maybe we've lost our internet connection then we can have a set error message and we can put in no server response but then we could provide an elsif and of course you could use a lookup object here a switch statement any other type of conditional logic you want to i'm just using a if statement right now now we've got error response we don't need optional chaining because it won't make it here if we don't have a response there it would say the no server response but now we can use optional chaining on the response and check the status of course it likely exists but if we get a status 409 that means the username that we've tried to submit is already taken so we can say error message once again and we'll just say username taken and finally another else we might provide here is just a generic error so we could say set error message and we'll just say registration failed once again these error messages i don't feel like need to point to any one specific field other than the username taken because we already highlight the validation as the form is filled out finally after the conditional logic here for the errors and what message we want to display you want to set the focus on that error field for screen readers and save okay with our registration form complete including using axios we are ready to test it out with our development backend and what i want to point out is if you do have this from my node. js course 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 okay now we can type npm run dev for this backend instance and it will launch the node. js server which will be ready then and listening for our submissions from our registration form okay we're connected to server is running on port 3500 okay we're ready to test our application so the first thing i'm going to do is type in my name same password i've been using press enter and we get a username taken because i had already reserved that username so now let's go ahead and try something else let's look at our react code and in our react code let's just make a quick change that we know will create a failure so if we scroll all the way up and look at our register url let's just remove an r there so it doesn't contact it correctly and let's see what happens when that occurs so now i'm going to go ahead and resubmit and see what error we get registration failed well that's great too so we got a response but it just didn't work out now let's go back to the code and of course fix our endpoint so we'll need to add the r back and let me try to think of a name i haven't already used and here we can go dave d dave that'll work and i will submit and we got success with the sign in so we've checked everything except not having a connection so now i'm going to stop the node server over here on my other screen looks like i'll need to reload and we could type in just about anything because we're not going to have a connection but the form has to be able to submit so we need valid name and password at least oops i didn't get a valid password confirmation at the end there we go and submit and now we have to wait for it to time out before we get the error but we got a no server response error everything is working as expected i hope this tutorial has helped you learn how to not only create a form with custom validation in react but has also shown you how important that it is to have accessibility features throughout and to highlight that fact before we finish i'm going to go ahead and turn on chrome box which is an extension you can add to chrome if you search the google chrome store for that it's free i'll turn on the screen reader username edit text invalid input 4 to 24 characters must begin with a letter letters numbers underscores hyphens aloud d a v e password password edit text invalid input 8 to 24 characters must include uppercase and lowercase letters a number and a special character allowed special characters exclamation mark at symbol hashtag alert dot dot dot dot dot confirm password password edit text invalid input must match the first password input field dot dot dot dot dot dot dot sign up sign up button no server response so it even announced our error message that is great one other thing we can look at are the elements in the console and let me inspect the username input notice the aria invalid attribute i'll drag this over is false because we have a valid name as soon as i change this though aria invalid is true so it is also responding to what we do in that field and all of these things are needed for form accessibility again if you like the pace of this tutorial where i didn't type out every little individual digit please like and let me know in the comments below so i'll know to make more tutorials like this and i'll also give a link to that node.