How to Make an Email Signup Form Popup Modal with Validation HTML, CSS, and Javascript Tutorial

what is good everyone so today I'm gonna show you how I created this email signup form aka you can call this a pop-up modal so pretty much when I go over here to the get started button click on this boom we got the little signup form right here and also and show you how to validate this so pretty much when I click on the sign up button it's gonna say hey you're missing something so let's go ahead let's just fill this out and I'll show you what happens so type of name and then be like we're just down right here and the thing is - when I go ahead and try to sign up before I thought out the last two forms or input fields they're gonna turn green but it's gonna tell me I need to put the password so let's just come out with a password here and watch this so make sure I type that in right can see so I put a souther character at the end to make sure that it's not the same and then if I hit sign up again it's gonna say the passwords do not match and then we just go and now they match and now turns green and then also when I click on the X button here it closes out the pop-up modal and also when I go to get started and click anywhere outside of this container right here so like on the side here it also gets closed down as well so if you want to learn how I did this and definitely watch the video all the way to the very end and if this is your first time on my channel I'm essentially documenting myself learning how to code and I'm doing it by coding and then teaching you what I'm learning so you can go out there and learn together so this is actually a part of three series that I just end up doing randomly but pretty much for this tutorial you can watch this from right now from scratch and make this entire thing like this but if you did want to know how I created this navbar up here or also this little section on this homepage then I will have the links of that tutorial down in the description below in case you want to watch the part 1 and part 2 and also last thing I forgot to show you before we get started is when I click on get started and then I go and actually minimize let me refresh the page really close you can see it but click get started it's also more responsive too so once I get down to the tablet sizing the image goes away and then I'll scroll in even more and you can see that hits like this and then we can sign up and do the same thing again with the validation stuff so let me just fill this out really quick so you can see how looks like on a mobile and then pretty much that's what we're gonna be making for today so sign up here boom and then going back sending it out like that so now for the zoo let's start coding alright so here I am on vs code and like I said I'm building upon the previous tutorial videos from part 1 and part 2 so in case you do not want to create that you just want to make the email pop-up don't worry I'll show you what you need to do you technically all you have to do is make a button but if you were following along and you already have all this created this is basically what we're at right now and it all happens when I click on get started nothing happens because you haven't code anything so basically in case you just found this video randomly and you haven't seen the previous videos all you have to do is technically let me go ahead and let me delete this show you tell me all you need to do is go up here to create a new file I'm just gonna name this index one the HTML and then pretty much shift exclamation mark press tab then literally column copy right here just make a button so this is the button right here so you could just copy this and just type button and make it a class main - BTN and then have the href right here and you're technically will be on the same page your screen will look different at the tarp as as far as ice TEDx but you'll be able to do everything that we're doing right now but I'm gonna go ahead and delete this page because I don't need this for this tutorial and now let's go ahead and go back to the actual original and it's a HTML file here so let's just pretend the top part is right there and let's go right here and we command B so first things first is I want to create our modal's so let's go ahead and press period or dots then type in modal and does that emit it automatically will go once I press tab and you'll see what I mean just a second and I'm gonna do hash tag as I want an ID I would do modal while actually I'm gonna do email - modal and then when I press tab now you can see created the class and the ID and then I hit enter it's now within this div and I'm gonna go ahead and create the div called modal content some of you dot modal - content and press tab here and then press Enter and next I'm going to create is the actual the X button the close button somebody's can keep this as a span I'm gonna do dot close - BTN and then press tab and then within this I'm going to do a special thing with the + sign right here so that's shift 7 on your keyboard and then I type in x and then a semicolon and if you did it properly it should change the colors and now let's hit enter that's pan and let's go ahead and create the left section of the modal so that's where with the image that you saw in the background so basically we go class I'm gonna do modal - content and this is going to be left and then a hit tab and then press Enter and now we're going to need the image so this pretty much go in and type in IMG and then press tab here and now currently we do not have an image so let me show you how to get that so in case you already saw from the previous video basically I went to this website on draw echo and then when you go in here it should be pretty much you click return now browse now and then literally you can search for anything so the colors that I'm going to be searching for is going to be a gonna have on my style section so if you if you first time if I don't have this but basically copy down this color code so once you're on this Ondra website click on the color box right here and if you're all not on mobile you probably like this and then once you click on this I'll let you change the color right there so boom now it's red and then I'm hit on the search and just type in like that's I've been like rocket or something go right here and looks like yeah it doesn't look like it's showing I want that one so let's try space maybe again this picture literally could be whatever you want it to be but I guess for consistency we'll use this one right here so to the moon I'm gonna click on this and download SVG for your projects now I'm gonna go here to show folder or show in finder and now I have the folders open so pretty much what we need to do if you haven't already created an images folder so in case you're against the first time watching this click on the second one new folder and basically just type in images and then you would be able to create a folder so I already have that so I'm gonna delete this and I'm gonna have my previous images one right here I'm gonna open this and then basically I'm going to do is click on the image that we just downloaded and drag it inside of here and if you did it properly if what look will look like it's crazy amount of coloring text and I have to do is hover over it right click and then click on rename and let's just call this pig 2 and then hit enter and it should be picked to the SVG let me exit off this and now let's go back to the index that HTML let me bring back the nav right here and let's X off this and let's go into the SRC and Lily we can type in images and then slash and then if it pops up you can see pick two two SVG so you can do the pick two dot SVG or you can just click on it and then hit save and now let's go ahead and add the next thing right here so after the image content click outside of the Left div so now we're in here and I'm gonna create the model content right so modal if you want to say modal content rights then I go ahead and press tab right there press ENTER and now it's going to create the actual form so I'm gonna go form and I'm gonna do dots modal - form and then I have the ID so hashtag form and I'm press tab and for the action there's put a slash here and then for the method you should put get four now it's not actually gonna Samaria which it doesn't really matter but we'll just do this for now and then let me go out like this we're gonna see it better so right now your form let me expand this so you can see it on one line yeah all right so now we got the form right there so now click inside of the form mm hit enter I may answer again so I'm inside the form now and now let's go ahead and start creating our input so first thing we want to do is create the h1 tag so h1 press tab I'm gonna say get started with us today again this is just like random filler text and I say create your account by filling out the information below right now let's go outside the h1 press ENTER and then I'm going to go ahead and create the div that's going to hold all of the inputs and the error messages in there so that's gonna call this form validation so form so dot form - validation and then press tab and enter and now we're going to create our input so this is the actual thing that you're typing into we enter in your name or email password so basically inputs dots modal dot input so this is the class and I'm gonna do ID and I'm gonna do name for the first one and then press tab so now we need to add keep the type as text but one thing at the here I want to add is the name I want to set it equal to name and then we're gonna have placeholder and things to that equal to enter your name okay and now it's press ENTER and then I'm just have a P tag that just says err message and that's just for now this is what update automatically goes to start coding so now we're gonna do is I want to basically do this three more times so I'm just gonna copy this and then paste it once so that's the email paste it another that's the password and again that's the password confirm so now let's go ahead and select the second all did right here let's change the type to email change the see ID let's change that to email change the name to email and then change the placeholder to enter your email and now this rinse repeat for the third one and basically this is going to be password so password here ID I'm going to change that to password and then name I'm going to change this to password and then the same thing for the bottom we're gonna go ahead and change the type to password and then ID we're gonna change the to password - confirm and then for the name I'm just gonna change this to password and then last would be to enter your or less changes to confirm let's see yeah confirm your password now forgot to change the place hold it above so let's say enter your password and let's hit command s and save it just in case you guys messed up anything you don't lose this and so forth this is the turn setup we have here and then last thing we're gonna do for the HTML we're almost done is go outside of the last for malediction div but you're still inside of the form so make sure you're still inside of it I'm gonna do input and we need dot modal - input - BTN which is the button and then hits tab and now for the type I want this to be submit and then for the value we can just say like sign up and then press Enter and then the last thing will be the like little text the bottom with the account thing so type in I'm just gonna do span and then dots modal - inputs - login press tab and then within the span I wanted to say already already have an account question mark login and then we're gonna do the greater or not a less than sign the a and then H ref equals quotes and then just put a hashtag quotes again then closing tag and that should automatically have the a closing tag created and then just put in here and make sure I login you have a space so boom okay with next day and then let's hit save alright so now we have just completed the HTML now let's go ahead and create a CSS file so we can make this thing look clean and nice so I'm gonna go ahead open this again i'ma create one call it make sure you click on this outside section first I'm just gonna call this modal dot CSS press Enter and now let's go for the fun part so let's go ahead and go to modal and if I shaggy see right now if we open up our website this is basically what we have created in terms of the in as HTML so right now you can see it looks really ugly and your pilot what's going on so let's go ahead and style this up make it look clean and get everything working out so the first I'm gonna do is have the root so roots and then basically we're gonna cap a color so this is just a way to make it easier to change codes across the side some of - - air color and then colon and we use this color right here it's just basically a red but I'll just have this one for my example so hashtag F 0 0 and then 0 E semicolon and then - - valid color colon hashtag 0 ad D 0 and should be a green right there and I do have other colors in terms of here on my style so in case we run into it I'll just go back to that you can just copy those but pretty much let's go with that for now and now let's target the actual modal's so let's go dot modal class right here so let me spell that right curly brackets press ENTER and one thing too is um we got to actually import this so since I already have the the Stata CSS up here if you're just starting out from scratch the first video you're gonna have to type in link and we're getting--we're in the head tag of the HTML so type in link make sure link and then press tab and then you have to type in mo modal dot CSS to make sure the CSS works but since I already have a style of CSS file and if you're following along from the previous tutorials what we're gonna do is we're gonna import this into our style CSS so you can see already did it for the second video so just import my new URL and just modal dot CSS and this makes it to where if you have a chameleon CSS files you won't have it like just stacked up like here it's all just in like one thing so that just makes it cleaner for me so make sure you have that in there so let's go back to the modal that's CSS and let's start creating a so let's do position and let's do possibly position:fixed and then I'm gonna have Z index of one so making sure it's above and then I have left of zero top is zero I want the width to be a hundred percent and then I want the height to be a hundred percent and then I want the overflow put that Auto and then we want the background color now this one I'm gonna be RGB a parenthesis then zero so zero zero comma and then opacity I wanted to be 0.5 it's basically like black capacity of 0.5 and then go down and let's hit um so before actually do that let me show you what's currently going on you can see here that's the background right now and it's like a UH like a darkest black pirate there now let's go ahead and put display:none for right now because we don't want that to be showing yet and then let's go to dot modal - content cubby brackets and let's do a background and for this jindo hashtag F 4 F 4 F 4 and then for the margin I want that to be 10% top bottom in an auto and then let's go ahead and do a width of 60% so right now you can't see what's going on but technically this would be like the square part here so let's go ahead and create a Stu box shadow : 0 5 pixels 8 pixels 0 rgba and then parentheses and let's just do a comma zero comma zero comma zero point two and then out of that parentheses press comma and then let's do is 0 7 pixels 20 pixels 0 RGB a parentheses zero comma zero comma zero comma zero point two and then semicolon now let's actually go and let me add the JavaScript really quick so that way you can see what's going on cuz right now you can't tell what's going on so again so we just created this right here so let me put a comma put this modal but now I need to target the button that I have up here which is the button on the screen here so in case you started the first video just use whatever button you created and we have to have an app that J yes so basically make and you file in daemon fjs or whatever Jas so I'm gonna click on this let's go ahead enter so this from previous videos so don't worry about this right now but pretty much let's go ahead and let's do I just call this modal items now here we're gonna do cons model I'm going to put equal to document dot get element by ID and then parenthesis so now targeting this and I wanted to be emailed - modal so that is essentially if we go back that's the entire container the modal is which is the entire screen with the width of a hundred percent and hundred percent and then you'll see eventually us we have the Java Script added do another cons somebody open BTN equal to document dot query selector and this is going to target the main - BTN which is the button that we had the previous tutorial or in case this for you if your first time this is your button that you've just made with the class BTN so aka is this button right here and let's go ahead and hit enter again let's do Const close BTN which equals to a document dot query selector parentheses and dot close - BTN and now let's go ahead and let's add the let's see / / click events so basically open BTN which is the this one right here we're targeting that and then we're going to do an ADD event listener and what happens here is when we put click so close click combo I'm using arrow function just a little switch it up but basically it's equivalent to just doing function in parenthesis but now just do parenthesis save some some code so print the seas and let me add the other parentheses on the edge just in case so don't forget and then enter the greater sign arrow then the curly brackets hit enter and now let's do modal dot style dot display equal to block and now it's semicolon here let's do close BTN so now we're gonna close it whenever we hit the X button add eventlistener parentheses quotes click comma put these again I don't know yes can you can see that equals get a science of arrow and then the curly brackets enter and they're gonna do modal dot style dot display equals to none okay so that's making it disappear and we just consistency then last thing we're gonna talk at the window so when case when you click outside of it it'll go away so window dots an event listener of click comma and parentheses gonna put E so that's we're targeting now and then equal sign greater than symbol curly brackets and I'm gonna say if e dot target so meaning if we click outside of the modal container is equal to modal so naturally the marketing arrived at the modal content container actual molars the entire like the entire site so if we click anywhere on that modal we're gonna do the curly brackets I'm gonna say modal dot display or my bad modal dot style dot display is equal to none so we hit save here and let's see if anything pops up so now you can see it looks ugly but we got something popping up and then click outside of it so let me scroll out so right now looks really weird but basically the modal content that's the square so we go back to our index.html it's the second day we saw so it's this this entire thing but then the modo is the actual outside part which isn't which basically anything that's dark so boom click here and I can see that have you noticed - I think the looks like the text the white text is showing so let me see if I can change that on the maybe put the Z next to like 10 see if that yeah so please yet is the index on the most yes - 10 because if you are falling off in the previous tutorials because I believe I had the a tag of the z-index - but basically we'll scroll this up now so now you can see we're actually editing this part so the JavaScript works fine here so we click it looks like this so now I have to do is add the CSS and then I'll show you guys the formatted Asian stuff in just a second let's go and check in so now we're here let's position make this relative and then let's do border radius so I want the thing to be curved on the outside slightly so 3 pixels not too much noticeable now let's do a minimum height so you want the minimum height because when you shrink with the console up like right now let me see if I can show you see so right now since it's not mobile responsive can't really tell but you'll notice that once you on play around with it at the end what you have everything done but I'm gonna do 500 pixels and that way so when you scroll it up it doesn't shrink it stays the same because if you don't it's gonna shrink with this gonna look really weird and then also display let's do grid and then let's do grid template columns I'm gonna do one fr one fr so now this is basically keeping it on left modal and then right more like this so now if I show you and see it's basically like this whole the image is too big we didn't mess with image later but basically now you can see the little rectangle part so that's essentially the left modal and then the right moles image but since you got this like thing I have to shrink this first so we'd be able to see it better let me hit X I checked in the images on the left side yeah yeah so let's go here now let's do let's make the clothes actually let's do called BTN second me do a modal model - content - left curly brackets let's do a I have this background a linear gradient so it's quite long so let me type it in background and I want the linear - radiance to be 90 degrees comma I actually copied this from this website but since um I already have it here just type in RGB a twenty seven seventy four seventy comma one and then outside of this for the season have 0% and then comma again and then we have RGB a parentheses 2 3 6 comma 4 3 comma 0 comma 1 and what can you see my screen B is cold give me a sec so 1 and then that's the parenthesis there and then outside that parenthesis press space 100% come save and now we have this thing here so let's actually let me go ahead and let me change the male image first because it's going try me crazy right now so modal - image curly brackets so width let's make this thing 80 percent Heights 80 percent position what is to be absolute and then I want the top to be 50% left to be 50% so right now if we scroll it out image is still massive you can see that and basically go back want to transform translates and make it negative 50% comma negative 50% and that way yeah I don't know why the two parentheses here this way I'll Center it and let's do modal contact form so modal - content - right curly brackets I'm going to do border radius I'm gonna have in 0 3 pixels 3 pigs with 0 in that position [Music] relative and then let's go back up to the more content left and let's make this just copy exactly what we had for the first part so copy that in and boom and now let's see what we got going on right now zoom out here cuz what we currently have right now so let me go back and we see looks like I must have messed up on the grid somewhere cuz right now it's not it's not formed in the place that I wanted to be so let me just double check one second alright so I realized why it looks so weird is because we forgot to ID the image because I was like wondering why the image is not so shrinking so I go back to the in its HTML file forgot to add the ID equals mono - image which is really important because right now we have no idea what's going on cuz I scrolled back out so it currently looks like this and then the one thing is we need to put this X button over here that way this will shift because right now looks really really weird so let's go over here and let's go into under main content or modal contents let me type in dot close - BTN curly brackets I'm gonna do position AB solutes I'm gonna do top 2% and I'm gonna do rights 3% and then font size 0.5 RAM and 1 Ram is essentially defaulted at 16 pixels so that's basically 1.5 times 16 and the index will be 1 so now if we save this now you can start to see it looks much much better because earlier I have 1 I forgot the idea here and then this simply shifted over here so now we pretty much need to style the form and then the validation and pretty much set to go so let's go over here and let's make sure the bug let me do a button hover for a quick so close - BTN curly brackets and I should know let's do cursor:pointer color var - - bright red semicolon and then that again if you don't have it is on the stasi assess fossa basically it's hashtag f9 4 - 3 D so if you didn't want to add that to your route up here you could order salutely just make it red 3 doesn't matter and transition let me just add 0.2 s these outs and I should put hashtag semicolon and hover here and then now we go hover over it turns red alright so now let's start going on with the form so let's see under this model right let's do modal - form curly brackets and let's do your position absolutes and let's do top 50% one left to be 50 percents transform : translates so we're gonna Center this now so 50% comma 50 percents I know why keeps having the extra parentheses so basically this and then with I want this to be 90% of the right model container or modal container and let's do Heights 90 percents want this too now so if I save it you can see right now how it's currently looking and now let me do a display flex flex Direction column justify content center and then a line item this Center so now if we go over here you can see how Kelly looks like this so now it's in this box looks much cleaner now is you got to change the sizing on the fonts and everything and then increase the input with of it so let's go enter here and let's do dot mortal - form and now we're gonna talk the h1 which was that ginormous text above it let's do font size 1 rim and let's do text align lister starts and then let's do with 80% and then I just want the margin - bottom to be 1 REM now we save this you can see it is much much much smaller which is why I like it like this and then let's go ahead and we can create the form validation now so that's basically the like red and green that you saw on the air so again this would be the the divs for that right here where has the inputs and everything inside of it so right now let's do form - validation using valid AME festival that right curly brackets enter let's do margin - bottom 0.5 REM let's do a width of 80% let me see open this up they can see that the width now is a but the input part inside of it isn't so essentially you see if I can edit the input first I wave me a little better to see it so mortal - input so now this is the actual form that you type into this way block padding-left 0.5 REM outline so you want that little like boom like outline on it none so outline:none border radius would be 2 pixels border is gonna be none height of it will be 2 R M and then width will be a hundred percent of its container and then last but not least box shadow this is just extra effects wanted to add one pixel one pixel one pixel RGB a of 0 comma C comma 0 comma 0.05 I want to be like super super slights I am as calm as a period so yes zero comma zero comma zero comma zero point zero five semicolon hit save just take a look that's looking much much cleaner now we're almost there guys and then let's go back up to the actually just let's create the scissor already on the Malayan fotos de modo - input and we're gonna target a placeholder so that's the placeholder text that we had like enter your email enter your name and this is the way you actually color the text here I'm gonna do light grey which if you don't have the previous tutorials it's basically for that I think I created I create this hold on they go back yeah imma have to create this let me find the the hex code for you so yeah so imma go my stassi's ass and do this so let's go industry while I widow death - light gray : hashtag I just put b1 b1 b1 comma you can see the colitis gray so I'm gonna save that so again if you don't have Stasi says just go to your route and just create that so now we have the light gray up here and it should be good for the placeholder let's go back alright so let's go and ice and upbeat button now so let's go ahead and let's do dot modal - input - BTN so now right in the button I don't want this to be width of 8% height to be to Ram border-radius went out to be 2 pixels background color to be var and I got bright red so that's on my route which basically again the hex code for bright red is f9 for to 3d so you want to copy that and add that to your route if you don't have it and then outline is none border is none color this one is var I just have white which literally you can just do hashtag FFF which is same thing or just put color white and then basically font size is 1 Ram so now we can check it out looks like this so now let's add the hover effect now the modal - input - BTN colon hover curly brackets now let's do cursor:pointer and then let's do background color I want this to be bar - - light blue which I believe I have to create that one - actually already have it so again its hashtag 337 af1 that's light blue that's what I have here is unite that to your root directory and then transition will be position all 0.4 s ease out now if we go to it you can see that it's it's coming like that so now let's mess with the actual login form now so let's go here let's do dots portal - input - login and we can show back on the index.html okay so that is the text down here so I already have an account login here that's what we're talking right now so basically let's just put a font size to your point a trim margin top one room color bar you see - - like gray you just do any great it doesn't matter and then 80% for the width and then we're gonna do text-align:center I believe yet it looks no it's so you can see it's down here this one where we're heading right here so now let me go back here and let's go and do modal - input - login a which was the the here word let's do text decoration let's do none color var - - right red and then just do fun way of 600 so it's like folded and now you can see it turned red and we have the log in here so now we need to mess around with this error message thing so let's go back up to the form validation section so up here I'll basically what I want to do is do form - validation dots here so this we're gonna be adding in JavaScript but basically I want this to have margin-bottom 0.5 REM position:relative border I want this to be 1 pixel solid and then I have the VAR - - air color which I'll have to create in just a second and let's do a border radius of 2 pixels so let's go up here to the top and actually already have it created my bencao air color is this one again so now let's go down a full validation and I was hit enter and let's do form - validation dot valid so if it if it works then it'll be such a green so let's do margin - bottom 0.5 REM position:relative border 1 pixel solid and that was too far - - valid color and then border - radius of 2 pixels save this yeah you can't see right now but um eventually we'll get to it let's do form that's validation of the P tag now which was the error message word let's do font size I want this to be zero point seven REM when do you margin - top 0.5 REM and let's do color bar parenthesis - - and one thought to be the air color so I wanted to be red then position absolute and let's do top 1.8 REM and then display to be what 10 let me show you why not what's going on click it it started and tell you can't see it because it's um it's Tenley it's gone but we'll just put display let me see display:none but eventually when we add the JavaScript it will pop back up and you'll see what's going on and then the last thing we need to do is the air basically so dot form - validation air of P and want to be display:block all right so save this so now you can see the error messages are gone the forms looking pretty clean now and nothing's really happening yet because we haven't had a JavaScript but basically that's that's what we got going on here so let's go back here and before we continue the JavaScript let's add the mobile responsiveness the media queries and this one is really really simple so just add media let's do screen and let's do max width of 768 pixels curly brackets and let's do modal - content - left curly brackets here and display:none so that is the image and then now let's do modal - contents and let's do a grid template column when it to be auto so everything centers now margin to be 15% Auto as well and then let's do a width of 70% and then a height of Seti for five percents and then go out of this one and we're making another one for the smaller screen size so media screen and max width of five 80 pixels and we got dot modal - content margin is 20% auto with is 90% and then the height is 80% so let's see you get started and see it looks like this now and then we scroll out so basically that media query when we get to the 768 pixels the left image section is going to disappear right there with the stuff still setting as percent high and everything and then basically it will shrink now the screen goes lower alright so this should be I think all these CSS we have right now so now let's get into the fun stuff aka the JavaScript so let's go ahead and get onto it so this is gonna be quite interesting one so let's go and start contact associates do form validation and let's target the forms now so let's do Const form and I'm just naming a form for this example and put document dot get element by ID print the seas and we're gonna target guess what the form so again in case you're new to this basically it's right there where's it add ID form so we're targeting the the entire form part right now let me actually you guys got some good stuff here and we want this for the name email password and then the passer confirm so basically you just go here and let me change this to name let's see here this one will be I know this will be female this one's gonna be password and this one will be password kind of confirms I'm doing camel casing so it's a he's new word basically capital letter and that's her name let's do name ID for this one was email password his password and then this one was password - confirm so just again to show you over targeting or targeting now each inputs IDs name for the name ID for the post email password and then password confirm let's go back here and now let's go ahead and let's do the show error message now so it's so error message and basically we're gonna create a function my name is show err we're gonna take it to parameter so inputs message curly braces hit enter and now I want to target the form validation we create a constant called form validation put enter I'm gonna target the inputs and parents elements so basically the parent of the input tag is what we're targeting so in that case input tag is this and the parent is the form validation which is right here that did right there so we got that and now what I wanted to do is I want to do form validation throw target now dots class name and I want this set equal to the form validation class or form - validation which was again it's literally this dibs class right here so this exact clatter targeting and then I want to add onto with the air class so air and then I'm hit semicolon and then next under that we're gonna do const air message and what he code this to form validation so again were so targeting the div form validation except now we have query selector we're targeting the P tag now which is the in this div we're talking for validation and then we're targeting the air measures the P tag right now and let's go and semicolon this and I want this to say error message and I want the inner text to equal the message and let's see save this so right now nothing is happening because uh we haven't created anything for the signup button yet so let's go ahead and add that stuff now so let's go here and do vent listeners and I'm gonna go me just close up due form so now we're targeting the form which again was right here which is form dots add eventlistener parentheses we're going to target the submits this time so cold submit comma space and then parentheses that do an error function put E so we're targeting the key right there with the arrow function and then curly brackets and we're gonna do is going to do e dot prevent default because if you've noticed before I save it whenever I hit submit it just just disappears so when I do this save this go here now it stops it now we're stuck here like this so now we need to do is create the error messages now so we click is gonna tell us like this needs this may character that this needs this so here I'm gonna create this function called check required and we're calling right now so to do parentheses then we're making array so we're not the repeat ourselves over your name email password and then password confirm there's a much different way to do this like if an else statement super simple but this way just makes it easier with less code and let's go here and pray comma or semicolon and let's do check I should let's do require first so let's go here now let's do C check required fields up basically creating a function is to check quired parentheses going to do just this is the input of the array that we just created and then curly brackets so for an input array dots for each turn our looping through the array you have the function and we're passing the inputs curly brackets and now we're gonna say if input dot value and then trim just creates the whitespace in case someone has spaces before we go away and then we'll do equals empty meaning not nothing is tight we want to show air and then go and have the input combo and then we're gonna have a back tick well tell you we can just say right now let's do arrow for right now let's see so now you can see it just says air right now here so it's nothing saw nothing like specific but basically that's what we're doing here because it's going back to the show error function we should create it up here and just displaying just literally error so what we're gonna do is create something to where it's play something specific to each input tab so click the back ticks will do template Liberals so dollar sign curly braces or call this get field name and then parentheses we're gonna try the input here and now go out of the curly braces but we're still inside the back ticks and I just put is required and then put the semicolon and right now since we don't have to get through and name created you know not gonna say anything let's go else and just do show valid which is another punch we're gonna create and then just put input here so now let's go here and create the show valid message so basically we have function so valid parentheses input curly brackets let's do Kant's and again this technically is the same thing as the show airs we can just copy this part and then we're gonna change some stuff in here so we're gonna change this to valid instead all right so now we have the show valid punch created now let's go ahead and create the the field name so field name basically we'll just put here get field name let's do function get field yeah field name here for the C's inputs and we're gonna return the inputs dot name which is what we did in the very beginning with the in XHTML which is right here now in naming it name you could target ID or like type but the problem is when you do that when you get done in like password confirm you're gonna target in Sec password s confirm is required and just looks weird so that's why we did name so we named everything individually email name password and since the same here you can see like that so now can put that name dot the character at and starting at the first position which is zero and then I'm gonna make sure that the first letter of that is uppercase so right now let's see if I by go through this it's gonna say like one letter because we just have literally the first letter of the names so going to concatenate this so plus input dot name and we're gonna slice it and we're gonna start at number actually slice put the seniors throughout the second letter so basically just took off the first one and now we can see name is required emails required pattern above all so now we're almost getting there close now we're just gonna have to add the additional steps to show case so let's see the character lengths and everything to make sure that is bad it's right now when I type stuff you can see it's green but you can see that the email still there and then here me actually just fill it out so right now it's just going green because you don't have any sort of like rules to prevent it from saying so like right now this is still gonna be green so let's go ahead and add it that additional stuff see let me do is under the required here I'll create another function called checking the input links let's do check input link which is basically what you're typing in so say function check link and when I have an input I'm gonna have the minimum characters and they don't have a maximum characters and within this we're going to do if input dot values what you're typing in dot length is less than the minimum characters which will set down below in just a second curly brackets if this is less than the min I want you to show air and I want you to put the input comma and then back ticks dollar sign curly bright braces get field name and I want you to say that input basically so be their name email or password and or for this example shows gonna be name right now must be at least and then we're gonna have dollar sign curly brackets min characters and then go outside and semicolon so basically they have here so basically saying if whatever you type in is less than the minimum value that we will provide just a second then get field name which again would be the down here so for this one name must be at least and it's gonna say let's say like eight characters and then let's go to let's see here else if input dot value dot point is greater than max curly braces we're going to say show error of input comma then back ticks and let me just copy this to save us some time command C and basically command B here must be less than and then we have max max characters and then else so valid which would be the green and then input so now we need go down to our event listener down here and basically add that function so we have the check blank and then print the seas and basically we're gonna have the input so we're targeting the name for this one and then we're gonna say the minimum so again this one right here min b3i output 3 you give a little whatever you want and then maximum I'll just put like 30 and now let's create another one for the make sure check length parenthesis for the password and I want this to say 8 and then 25 is the max and then I'm gonna just copy this down again all right so I should come in alt down arrow or no yeah alt shift down arrow to copy like I did and then let's do password confirm and then the last thing we want to do is create a function for password match to make sure that the passwords are actually the same so this one's pretty simple basically well do password match parenthesis password comma and then password and fun and now I have to just create that function so let's go up back here and go into the input length let's do check passwords match and basically I'm gonna say function password match let me get input 1 comma and that input 2 and pretty much here if ok if input 1 dot value exclamation mark equals equals so if it does not equal and put 2 dot value curly braces you want to show air and then only show this for input 2 which would be the password confirm and say passwords do and passwords do not match so now everything worked out well let's go here and let's check everything out so again name is Billy three characters email is required passwords must be at least 8 and hazard beulas a so let's go ahead and let's do three check it turns green see you not com green and that pasture let's do a hey and see if sees pen doesn't match head here and then I say it must be at least 8 characters let's do hey hey and then boom everything works out so now if we go back to the home page click on our button let's actually refresh this so click here click it sign up it's gonna say everything here just type stuff in sign up and then when we shrink it disappears mobile-responsive and then boom here we go check it again it's like this so this completes the email signup for power modal so if you did enjoy this video then definitely give it a thumbs up and also if you want to watch the previous tutorials make sure you go down the description or just check out my channel and subscribe down below so you can see my future videos as I document myself learning how to code so right now this is part 3 but basically I'm just building a site from scratch and I'm just documenting each section as I do it and teaching you exactly how I did it so that you can go ahead and learn what I'm doing so in case anyone out that is expert or much more I say experience in development definite let me know any ways to optimize the code or just any thoughts on it and aside from that again if you have not already go down below subscribe you have not calming down any thoughts what if I have the video give me a thumbs up and I'll see you in the next tutorial peace

Channel: Brian Design

Views: 9,860

Keywords: how to make a signup form, how to create a signup form, how to make a modal html css, email signup form css tutorial, how to make a signup form in html, how to create a signup form in javascript, modal css javascript, signup form in html and css, signup form in html and css javascript, signup form javascript, how to make a pop up signup form in html, how to create signup form in html and css, html and css, css, html, javascript, html and css tutorial for beginners, learn how to code

Id: Dn4_kkmeVqI

Length: 63min 28sec (3808 seconds)

Published: Fri Jun 05 2020