Video instructions and help with filling out and completing 8850 Form Submission

Instructions and Help about 8850 Form Submission

What's up guys we made a form that we ducked out with material design and we can type stuff but nothing really happens when we hit submit we're just clearing the form what I'd like to do is submit that off to a server right maybe we want to create a user a lot of times that's how it works with forms now before we do that I want to do some clients I want to show you how to do some client-side validation and here's why you might want to do that so let's say your server has like some requirements so let's say users filling up the form here bob bob bob bob bob right and let's say your user name has to be at least five characters long it'd be nice not to have to make a request to the server the server hat tells you username has to be five characters long you display it here right it's one way to handle it but then you have to make a request to the server when you know beforehand and you could check on the client side before you send it off whether the username is long that so I'm going to show you how you can do that here so we're going to be using a material UI error thing here this error text to show how to pop up if there is an error so we're going to do this is a code if you don't have the code you want to follow along I have a link in description below so you can grab it so what we're going to do is we're actually going to understate here is we're going to keep a first name air and this is basically just the air that the user then you know oops I spell that wrong let the air that associated with this field so if we wanted to display an error we're going to fix this field so I'm going to change this to two last name and you want to have one you can have one for as many fields as you want you know just for each error text you'd like to display basically you can create an error so for me I'm going to do each one because I might want to have it for each one so password air and Theriot so now am i down here I'm going to say error text is equal to this thought state dot first name air and we're going to do this all the way down get rid of your last name air and we're going to do it for the username as well username air and we're going to do it for the email air and the password as well okay and if you come back over here you'll notice nothing looks different type nothing goes red nothing's happening yet what we're going to do is when the user submits to the form here so right here on submit here you'll notice what we're doing is we're just saying they stopped props on change the stop set state and we're setting all these we're just clearing the form here so we could write a little call on it clear for them but what we could do before this is we could say check for errors check for errors and we could say Const / so we could check for any errors and if there's not in there we go ahead and clear the form all right that makes sense and then our check for errors we should we should really instead of saying check for errors we should say validate because that's what we're doing and here what we can do is we know the users submit the form so we could say if this thoughts state dot username is less than five characters we're going to return false and what we can do is we can handle multiple layers too so we can say what is error equal false and we're going to return is there I'm going to say is error is equal to true and then here we can say Const errors and then here we can say errors dot username air through the name needs to be at least five characters long now this is a very long air text so I don't know how well it's going to look like meaning to fix it but then what we can do at the bottom here is you can say if is air this dot set state the state is going to stay the same right this dot set state so this will be state and then we're also going to expand errors so if there's an air we're going to keep the state the same but we're also going to add on any errors that could occur so let's see this in action Oh Bella date that should be this dot validate here all right so say we come down here we type involved for everything hit submit and let's not work at all so let's see what happened user name dot links there we go now let's see if that fixes it for us it's a knit and bam so user name is built least 5 characters long now we're not quite done with this because look ray I want to show you two other things so we're able to stop then that's good there's two things going to do one I want to show you how you can display two airs at the same time so let's say you want the username is greater than five but maybe you also want to check if there's an ad sign so what we can do is say this thoughts state that email that contains I believe contains four about time elves contains is actually a thing I think it is contains at sign so if it doesn't