Accredit Validated Field with airSlate SignNow

Accredit validated field

in this video we're going to be going over how you can add validation to a form so I create a new component to do this called validation form and I'm rendering that in the app now so this is similar to the form that we built before but now I'm taking three fields the name email and password and I simplified it a little bit and I made them all input fields so we have three inputs and now you'll notice there's a few different changes or things you haven't seen before the first is I'm adding a new prop on them that's called placeholder so what placeholder does is that's just a string so we can see which input field matches with what and then also this input here I gave a type of password and so what that does is when I type the password it makes it black or hidden so that's important to do and then everything else is the same we still have a single function to handle the change of these inputs and then we are console logging the state when it's submitted so now what I'd like to do is how do we evaluate this so what I'm going to do is I'm going to add some more fields to my state so this is going to be called name error which is going to be a string and I'm going to do the same thing with the email and the same thing with the password so what these are are strings that represent the error message that we should display to the user for this field so now I can actually display that error just below the input field so here I'm going to say this this dot state dot and we'll do name error and now by default we're not going to see anything it's because it's an empty string but now if I have name is empty we're gonna see it's gonna be displayed right there and now we can make some changes to this like for example we can style this red and now that looks more like an error message the font size is huge so we could make it a little bit smaller if you wanted to like I don't know maybe twelve and that looks a little bit better and now we can display the air below the input field like that now we don't always want to display this error message we only want to display it if this actually has an error which is pretty much doing it by default right here so if it's an empty string or not it's pretty much being displayed additionally we could do we could conditionally render this so we could say this dot state dot name err if that's a thing render it otherwise rendered null we don't really need to use conditional rendering right here because it's already not going to render anything if it's blank so that's another option we could do though and so I could copy this and I could paste this here and I could do the same thing for the email err and for the password error so now if I'm typing stuff and then I submit we're not going to see the error the errors don't pop up so what I'd like to do is when the user submits the form I want to validate and show any errors that exist so I might create a function called validate that does just that and here I'm going to say Const is valid is returned by calling this stop validate so if it's valid there's no errors in there then go ahead and console.log the state so in this validate function we're going to check if there's any errors so I'm just going to copy these three right here and I'm going to say let and the what so I'm going to just set them to empty empty errors or empty strings here so here are three error messages or errors that could possibly occur and now I'm just going to add if statements so I'm going to say if this dot state email dot includes an @ sign so we're going to check if this includes an @ sign so why don't we just start with the email over at first so if it does not include this @ symbol then we'd like to say email error is equal to invalid email and then what I can do is I can say if email err then we're going to say this dot set state email err so we're now setting it to whatever we got and then we're going to say return false so it wasn't valid so now if I were to inspect this we can console.log what happens so here's me putting in some random text and here's it with a @ sign so if I submit I'm not sure what happened if it even should at least console.log this and the reason for that is we forgot to say return true at the bottom so if we don't hit any errors and validate or gonna say return true so here is a valid one submit and now we can see our data what happens if I get rid of that and try submitting though we now see an invalid email but now if I were to example hit that sign and say submit you'll notice that the error message is still there and still showing and the user may not know whether it worked or not so after we handle submit we want for example to clear the form so clear form so the way to clear the form and by the way we only want to clear the form if it's valid and the user submitted it so to clear the form what we can do is just set the state to the default values so I'm going to create a object up here that's going to be called the default state and I'm going to copy this paste it here and I'm gonna set the state here and maybe a better name instead of default state is an initial state and so we're going to set the state to the initial state and then to clear the form we're just gonna say this dot said state and now set it to the initial state so now when the user signs up here if they have an air submit well actually that was no error sorry let's do an error so we have invalid email and then they type a good one and they submit it's now cleared and submit so that's kind of the functionality you might see in a form and so that's pretty much the way to be able to do that at least this is one way and now we can add as many error messages as we want and we can add it for both the name and the password so maybe we want to for example say if not this or if this thought state name is less than 1 or we could just say if it's not a thing so if it's empty we can say name err name cannot be blank and then we can say if there's a name error or there is a sorry if there's an email error or a name error we're gonna set state and I'm not sure if I've actually shown this before this might be weird syntax I forgot about that so you'll notice how I'm setting the object here I'm not saying email error is equal to email air so you'll notice this is redundant in cases where you have the same the key is equal to a variable the same name you can just reduce that to this and it's equivalent so if you're unaware that's that's a JavaScript thing that you can do alright so let's take a look at this so if I leave the name blank I put in a good email and put in a password we try submitting now the name cannot be blank let's go ahead and make the email bad now we get invalid email I'll type some stuff try submitting now we just get an invalid email and then we could do the same thing for the password if we wanted to and I have another validation for the password but I think this gives you guys a good idea how you can handle airs at least one way we can you just create a function to validate and you can add any checks that you want here see if you get any errors update this state with air so this is pretty much the technique is you'll store any kind of errors in your state by default you're gonna have no errors and then you just update this state with any errors that occur down the line and you can display them here you