Add Single Validated with airSlate SignNow

Add single validated

hey everybody welcome back i hope you're having a great day today in this video i'm going to be showing you how to build a contact form and additionally it also has some validation so let me just go ahead and show you what we are building so over here we have a form and if you were to try to submit this form without providing any input it's going to show some red boxes around the input boxes and then also it's going to display this little error hint tag or text down here and if you were to fill in all the forms correctly so i type in a random email and also type in a phone number and then finally a message um we love your product so something like that and after you fill this in if you were to click the submit form button it basically shows you a thank you message and we have some placeholder code to kind of send that information over to a backend we aren't going to be actually doing any backend related stuff this is all a front-end tutorial so if you are new to javascript new to programming i'll definitely stick around because we're going to be doing some html some styling and then finally some javascript to kind of get this all going and then the last thing i'll mention is that we're not using any libraries or frameworks so this is all just vanilla js so i think it's a really good learning opportunity if you are new to learning javascript all right so let's just go ahead and uh get started let me just go ahead and walk you through some initial setup you can see here i have a folder with three files i have index.html index.js and style.css so if i just go ahead and scaffold out the index.html i should be able to view it over here and just to verify that let's just print out something so hello world and that is working and so secondly in this index file we want to do two things we want to first bring in our javascript so i can do a tag called script source and i could try to bring in index.js so that the javascript can run when the page loads and then secondly we want to bring in our style sheet so i can say link on css and i could just say style.css and that will bring in our stylesheet as well just to verify this is working because just style the body a little bit say like background color is green and we're good to go so let's get rid of the margin on the body because that's going to be kind of annoying so we got our three files and we should be good to go now there's a couple of steps that i'm going to just go ahead and copy and paste in because these are things that i don't know off the top of my head i found them on either stack overflow or as an example css snippet so the first thing i'm going to paste in is i want to bring in a google web font so this will really help with styling and making the text look a little bit better so i'm going to go ahead and paste that in above my link here and we can use it by simply saying font family latto i believe so let me go over to my css and say font family is lato actually in fact i think i need to add sans serif after it so if you see here if i as i save it'll show me the latte font the second thing i'm going to paste in is a snippet for checking um if an email or a phone is valid right this is just some regex i found a stack overflow but we're gonna be using it later on so i figured it would be good to just go ahead and paste that into a javascript that we can use and if you don't know regex you can read up on it or learn tutorial about it but kind of complicated but really just checks the string to make sure it matches a particular format and then secondly or the last thing i just want to bring in this style which we are going to be using all right so that was kind of our boilerplate paste code in no shame there because i don't know all the stuff off the top of my head so let's just go ahead and get started with building out the contact us form all right so let's just go ahead and start with building out that gradient contact us banner at the top so inside of our body and by the way disregard these these are just so i know if my face cam is probably going to be blocking code so i need to try to keep in mind to keep the code near the top of my screen so anyway in my body i'm going to add a div with a class of contact us and that div needs to have a couple of things the first thing it needs to have would be a header which says contact us and if i save that you'll see it pop up over here and just as a reminder sometimes you want to have your dev tools opened up with your cache disabled so in order to turn off your cache you want to go to your network tab and click disable cache or else sometimes your browser was just going to save on to old styles old html javascript and you're going to run into a lot of bugs anyway um let's just go ahead and close that down a little bit so it doesn't get in the way so we got a div up here with a contact us and we need to also add a paragraph tag that says we'd love to hear from you uh do exclamation mark please send us a message i don't know i'm not good at writing type or copy or whatever it's called so let's just go with that and let's see how it goes so now the next step is since we have the html we can actually try to start styling it so let's go to our style css sheet and we are going to just start styling that class of contact us so i'm going to do that comment this out move it up and that should style that little div and on top of all that we want to just add maybe some color to the text to make it white so it's easier to read maybe some font size to the text so it's again easier and then i think some padding would make it really easy to use as well so now we got a nice little banner we know what page we're on we know what we're trying to you know tell the user what to do you could probably spend more time giving this more love to you know make it more user friendly but hey that i think that works okay so now that we have the green contact us banner let's just go ahead and start working on the form so on underneath the contact us we could just do a form element and that basically is used for keeping all your inputs together inside a collection so that when you do a submission to the backend it can take all the names of your inputs and push them over that's more of a advanced talk but right now we're going to make a form and we're going to start on just doing one of the input fields and try to add error text and error styling and just try to add some validation and just do that and then come back and kind of do the same for all the other inputs this is just going to be a lot of copying pasting at that point so the first input box we care about is the full name of the person who's trying to contact us so i'm going to make a div and give it a class name of form group and this is just to kind of wrap all the the elements that are related to the input box the the full name input box together so we can style them and inside of this we're going to have a couple of things the first thing we need is a label and that label can say full name i'll go ahead and save that we see full name pop up here and what else we need we need a input box and we also need a div maybe with a class name of error hint and that could say your name is required all right so we have the starting or the start of a a cool form but we need to style it because it looks pretty uh ugly in my opinion so let's just go ahead here go go into our style sheet and let's just start styling the form so first of all let's add some padding to our form to make it match the same you know padding of this form so 2 40 on the left 40 in the top and we can start styling the label first so i'm going to say um let's style the form groups label so we could do some type of like nessa's selection here and just anything that has a form group class the children of that class target the label and start applying some styles so what i'm going to do for the label is give a display of block because right now i believe it's an inline block and that'll allow us to do like some margin and stuff on it later and right now the font size is really small in my opinion so i think maybe a font size of 20 might be better maybe a margin bottom of tin to give it more spacing between the input box in the name and we could also start styling the input box because i think that looks okay you could spend hours just changing styles and stuff maybe 24 might look nicer so next i want to style this input box so let's just go ahead and start doing some stylings for that so i'm going to do form group and then input and i could give this a width of like 320 and maybe some padding of tin just to make it look nicer and the font is probably really small so maybe give it some font size to match the label or maybe a little bit smaller than label now if i type into it we can see and then sometimes it's nice to add kind of a really light gray instead of black just so it's not so abrupt maybe do that to all the black text but anyway what would be nice here is we have some placeholder text which would tell the user like what actually needs to be here like an example of what they type in so i'm going to go over to the input here and i'll add a placeholder and i'll say your first and last name and type right now all right so now let's just do an example of what this input box will look like if there was an a validation error so i'm going to add a class do this called invalid just to kind of visualize what an invalid input box would look like and i could say input.invalid and give it a border of one pixel solid red so that is what we're trying to achieve when there's an invalid input put here and down here your name is required it'll probably be good to style this red and also add maybe some margin between the input box and this hint so if i go here i'm just going to add some margin bottom of 4 pixels a little bit and then i'm gonna say error hint color red all right so i think that is a good enough styling of like what it would look like if there was an error on the page and what we should do as well is we should probably add a button down here for submitting the form so let's just go ahead and do that i'm going to add a button inside the form and it's going to be called submit form or just submit who knows maybe submit submit message maybe that'll make more sense and so let's just go ahead and style this as well and it'll probably make sense to add some type of like horizontal rolling so we can go ahead and just style those with the hr i can give it a give it a height of like one pixel and give it a background color of whatever green this is let's just try to figure out what green that is and let's just go ahead and add border none to this that should make it to look a little bit better so it's a little green line just to kind of add some extra styling so what we should do is probably add some margin bottom to this do like 40 pixels or maybe 20 and maybe some margin top to it as well just to kind of move it away no i think 30 might be a better option anyway to the fun part let's do the button the button could have some padding on it do 10 pixels and see how that looks to give it a bigger font size and we could give it a background color of none or maybe it's background of none yep there we go and then border of none as well uh actually we do want to border let's just make it that green that we did up here so we'll do a one pixel solid green and we do want rounded edges so one way you could do that is border radius of do five pixels and see how that looks maybe 10 pixels that looks pretty good and then when you actually hover over it what we want to do is change the background color to this green and maybe change the border in the color of the text to white so what i can do is a button make sure this isn't hidden by my webcam i say button hover and then we want to set the background color to that green we want to make the border a black the color could be a white and then we could also do a transition and say all one second just so it slowly changes the color of the button like this and that's a little too slow so let me just go ahead and do that change it to 0.5 seconds and add a cursor so that doesn't look too bad i'm actually going to change the text to submit form and then maybe scale down the text a little bit all right so let's just go ahead and as i change the text here and over here what i'm going to do is just make the font size a little bit smaller so maybe 20 pixels or something all right so it doesn't look too bad so let's just go ahead and move on to how do we actually do form validation so what we want to do is we want to get rid of the initial error and hide this so we want to hide this text and what we could do is just add a class to it called like a hidden i guess and we don't want this invalid class on this one either so we haven't defined what hidden is so let's just define what hidden is and i'll say display of none so now we could just dynamically add hidden or remove hidden if we wanted to remove the error text and then same with this we could add the class of invalid to the input box to make it show red or not okay so now to the fun part we can start moving on to a little bit of javascript to do some validation to make sure someone typed what they needed to type in into this input box so let's go ahead and open up the javascript file and again we have these two functions that we're going to use for phone numbers and emails but let's just go ahead and grab some of the dom elements out of the page so we can actually use them so in this case i'm going to say name input is equal to document dot query selector and then i want to grab the input box that has a particular name attached to it so in this case we didn't add a name so we can go over here and add a name and we can just call this input box i guess full name if we wanted to i'll just i'll name it name to keep it simple so now that gives us the ability to query for this element using document.queryselector so i can say grabbing the input element that has a name of name and just to verify that we actually got that i'm just going to go ahead and print it out real quick and notice that we do get that input box out so the second thing i'm going to do is i want to grab the actual form element itself so if i say const form is equal to document dot query selector of form that'll give us the form and that's going to allow us to add a event listener so when someone tries to submit the form we can do something so let's go ahead and move on to that so on the form element itself i'm going to say form dot add event listener and i will say listen to the submit event and when someone tries to submit the form by either clicking this button or pressing enter on the last field we can first of all do e dot prevent default so the page doesn't refresh and let's just make sure we're getting here all right so as we click on the button and also as we press enter here we are seeing that we are getting to this callback function so what we want to do is we want to verify that the input field has some type of value typed into it so we could inside of this callback the listener basically just check if name input.value has a value then we're good otherwise we need to probably display those errors so let's just make a function that can kind of help us out so i'm going to say validate inputs here and what i'm going to do is just check if name input.value is not defined then we have some type of errors okay in this case what we can do is we say nameinput.next and then we can grab that error hint that we have hidden right now so i could say well that will be the error hand and then i could just basically say class list dot remove hidden so now that we have this little helper function we can use let's just go ahead and call it instead of printing out to the console and that should check and print out that little error text if we haven't entered some text here so i'm going to type in submit form and see that that pops up which is pretty cool so we also need to show this border around the input box and give it a invalid class so what i'm going to do is say nameinput.classlist.add and i'll say invalid so now if i do it again i'm going to highlight both of those so that's pretty easy to get going and instead of doing this you could have named that error hint and been more like specific but this is just a shortcut way if i know that in the l in the dom that they're going to be directly after each other it's a little bit brittle but it'll work for this little tutorial so now when someone types into here notice that it's it's still red and that is not what we want so what we want to do is add an event listener to the input box and if it changes we can just call validate inputs one more time so i'm going to say nameinput.addeventlistener and then if something is typed into it i can do the input event and i'll just go ahead and type call validate inputs again all right so now that we added that event listener to that input box when i have errors and i type into the input it's still not going away and that's because we need to actually do something in this else statement here or what we could do instead is just go ahead and remove these classes or add them back every time we do a validation so that's what i'm going to do here i'm going to say name input.classlist.remove invalid and then also i'm going to do this and just say add back hidden so every time you revalidate your form just add or remove those classes again so let's try it one last time submit the form start typing and notice that the errors go away and then at this point if i click submit form we could do like an ajax request to a backend and send some data over and show like a success message so what i'm going to do here is i'm going to say inside of the validate inputs let's keep track of if there's an issue or not okay so using a boolean that i could declare up here i could say let is form valid is equal to false and if we call validate inputs we can set it to true and if any of these are false we'll set it back to false okay and then finally down here we can say if the form is valid then we can do like a request or we could just remove the form and show that success message i'm just going to say form that remove right now and just show you how that works so i'm going to submit the form type into it submit it again and notice that it cleared the form out which will allow us to display the the thank you message okay so let's work on the thank you message and then we can kind of add the other inputs so for the thank you message let's just go ahead and under the form we can add a div class of thank you or something and that could just have some text that says thank you for your feedback exclamation mark and we could just style that or make it hidden by default so i'm going to put a hidden class on that and actually before i make it hidden let's just style it and make it a little bit nicer to look at so i'm gonna style the thank you and i'm gonna say give it a padding of 40 pixels font size of 32 pixels and text align center cool so now what we should do is just basically grab that dom element up here i'll grab thank you from the page query by the dot thank you and what we need to do is just basically show it when we remove the form so i'm going to say thank you dot classlist dot remove hidden all right so let's try this i'm going to add hidden back to that thank you field and let's just try it so i'm gonna get some errors type hit submit and it says thank you for your feedback so that is basically how you do it with one input box now we could just copy and paste some stuff to get it working for the other input boxes as well so let's just go ahead and move forward doing that so let's just refresh the page here and let's start working on these other input boxes so the next one we need is email so i'm going to say email and i could say name as email and the placeholder is your email address and again we're gonna have your email is invalid will be what we'll what we'll print out if someone types in a bad email and one thing you'll notice is that underneath these form groups we should probably add some margin so i'm going to find the form group and we don't have like a top level styling for the form group so i'm just going to go ahead and create one say margin bottom of 20 pixels and see how that looks that looks okay all right so we did the email we could just go ahead and copy a lot of the code here so instead of um just copy name input say email input check for email and then basically do the same logic here um so a lot of this logic could probably be pulled out into functions i'm gonna move this up here and you'll notice that for everything we're gonna be doing the same like add invalid or remove hidden so let's just go ahead and write a helper function for that so i'm gonna say reset input i'm gonna take a element and then we can just call these two methods and then i'll call it with name input and this needs to be elm okay i'll reset elm instead and then i'll make another helper function called uh invalidate elm and again that's going to take one argument called elm and it can call these two things i'll call invalidate elm and pass it name input so hopefully this still works if i have an error it goes like that and that just makes the clean a little bit the code a little bit cleaner so let's do the same thing with email so i'm going to say reset elm of email input and then i'm going to check to make sure if using the helper function we brought in we could say email input.value and we could do is valid email up here so let's just go ahead and call if is valid email is false for the value of our email text field we could just invalidate the email input all right so let's try it again and it looks like i probably didn't name something correctly so let's just go back so we named this email and we brought it back here email input and we reset it here and we invalidate it here so let's just make sure we're not actually getting there we are so for some reason invalidate elm is not working as we want it to and that is because i did not copy paste error forgot to update those let's just go ahead and update those so now if i were to submit that notice that the event listener is not on the email one so let's just go ahead and add that in and copy this at this point you'll probably notice okay we're doing a lot of copy and pasting for all these input fields so let's just instead put all of these inside a single array called inputs i can see like name input email input hopefully my webcam is not hiding that and what we could do is basically loop through for each one and add an event listener to just validate the inputs so with the inputs that for each input and then for each one i'm going to add an event listener and just basically do the same thing so i don't have to keep copying and pasting this code over and over again let's make sure it works oh it's well it's not working because i don't have a valid email in right so if i actually put one it's going to work now so the last thing not the last thing but another thing i notice is that on a clean state of the page the moment you type something it starts invalidating the other fields which isn't really desirable so what we want to do is add another boolean that says like is validation on and set that to false and then we don't want to do any type of validation until it's true so i'm going to say if it's not on just go ahead and return and we want to set it the moment you try to submit so down here the first time you do a submit we can set it to true so now when the page loads and we type it's not going to try to validate both of those it only validates them when you do the initial submission okay all right cool so let's do the other ones real quick and then wrap up this video so i'm gonna go ahead and add one for phone say your phone number and say your phone is invalid and i'll add one more for the uh the text area for the message so instead of input here it's going to be mess text area we don't need empty classes on all these so let's just go ahead and remove those and that's going to say message and that's just going to placeholder that says your message name will be message here and your message is required could be the text for that all right so we didn't style the message at all so let's make sure that we do that and i think i have a missing div somewhere yeah let me just do that all right let's style the text area because we haven't done it and in fact the text area in the input should probably be really similar so let's find where we style the input right here and instead of input we could do input comma text area and they should both be styled the same way now the text area probably needs to be a little bit bigger i can make the width like 500 pixels or something it may be a fixed height of 300 pixels that's a little much try 200 all right so now we just need to make sure we do the validation for these two all right so same same approaches last time except for we are going to be doing a different validator i'm going to copy this and use phone this will be called phone input and we could add that to our inputs list so that the event listener is going to check when you type and we could just make sure we reset it here in fact we could do a for each here the inputs for each input and then we could just reset it so i could say reset l how about that that'll clean that part up a little bit and then we also want to check um the validation on the phone so it is valid phone and then that's gonna be past phone input with a value and then we could just make sure that we invalidate that so let's make sure this works and if you type in a real phone number one two three four five six seven eight nine i guess it needs a real area code okay so that works and finally the message we haven't done the message yet so let's go back up and make sure we do that message input so i'm going to do a message input that's going to be called message here put that in our inputs list and then we just need to check it to make sure it's defined so i could just say um message input dot value make sure it actually has a value and then we need to invalidate it afterwards i think i have an error over here so let's check this out every property class list of null i think it's failing to get this message input oh because i'm querying for input instead of text area let's do that and i will go to my console and clear that out all right so let's submit the form and now when i type stuff in do my email we can do a phone and then finally a message and submit it i saw my child woke up so this is going to be the end of this tutorial thank you so much for watching if you thought this was useful be sure to subscribe subscribe and leave a like