 Hi everybody, my name is Wadi and you're watching my channel Wadi the Brand. Today we're going to do some server side form validation using the Express Validator, BodyPasser and EJS. This is an introduction video but it should give you enough knowledge to get you started with form validation. As you might already know, it's a good practice to validate user input on the server side because you can protect against malicious users who can easily bypass your client side scripting language and submit dangerous input to the server. As I learn and develop my Node.js skills, I will be sharing a lot more videos just like this so if you find them useful and interesting please consider subscribing by hitting the red button below. Don't forget to smash the like and if you have any future suggestions or any questions please comment below and now let's jump on the computer and get started. Welcome everybody and let's get started with this video. First of all to save some time I've already created a very basic project and this project will be also obviously available on GitHub and on my blog and I've actually already started working on a blog post which will take you through step by step everything I've already done in this project so this will be available straight after I complete the video so make sure you check it out the links will be here to my github page and so on and also I'm going to use this as a guide as well which will hopefully help me out. First of all let's have a look at the project quickly and then we can focus on the express validation. Now first of all let's open package.json and let's have a look at what we have here. Now the dependencies that I have installed are ejas, express and nodemon. Nodemon starts the app.js file which means that every time I make changes to my project I don't have to restart the server which is great and this is pretty much it in here obviously we'll come back later on and install the rest of the stuff that we need such as the express validator the bodypizer which now has to be installed separately and let me now quickly walk you through the app.js so in the app.js I've obviously set up express I've got a port number of 5000 I've set my view engine to ejas and of course feel free to use whatever engine you feel more comfortable with and then I have two views which I'm rendering with ejas and the first one is our index page which is kind of our home page it's just going to be an empty page pretty much and then we have the register page and this is where we'll be building our form and at the end obviously we are listening on port 5000 which we can check out now. Because I'm Windows I will be using the power shell but of course if you're mac you can use the terminal or you can just start a terminal in visual studio code I just prefer power shell and for some reason the terminal for me looks very blurry or in visual studio code let's start the application and look at some of the views to do this I'm going to do npm start and hopefully this should start or local server and if I go to my browser you'll see that localhost 500 is working we're not getting any errors but we actually don't have anything on this page if I go back and let's look at the index.ejas you will see that we don't actually have anything here and the same for register so let's build those two pages super quickly and the reason I'm doing this is because I wanted to include bootstrap so our form looks a little more presentable of course this is not required so first of all let's do an html file document super quickly and this will be our home and now let's get the bootstrap cdn so I'm probably going to be using the bootstrap 5 alpha so let's have a look at download and let's hopefully cdn okay I'm gonna grab the cdn from here copy paste it under here and let's do view toggle a wrap and okay and I actually don't need the JavaScript one so I'm just gonna be using the css okay so let's test whether this is working and what I will do is do a div with a class name of container and inside the container let's close the div and give it a title with h1 called home and let's link the register page as well so href equals register just like this and save so let's go back to the browser refresh or look at host and as you can see bootstrap is working we have or register link as well so if you go to the register page you'll see that we're getting an empty page so let's quickly build that page and add a form to to do this let's copy everything that we just done in the index.ejs go to the register ejs and paste let's swap this with register and let's add the title to be register as well and let's remove the link save this go back refresh and as you can see we're getting the register page now now the next step that we need to do is build a form to do this again I'm going to be using bootstrap and let's go to components and find forms now the form that I would like to include is this one here the top one and I'll probably modify pretty much everything just because I want to add some more fields and I want to remove some of the some of the text around just to simplify everything so let's copy the form quickly paste it in here now I actually want to add a few more inputs rather than just email and password I want to simplify this form a little bit so what I'm going to do is let's get rid of everything from now and we'll build it from scratch actually first of all before we start building our form there are three things that we need to do we need to set our form action to be equals slash register and we need to set the method to post just like this and last but not least very important we need to have a button with the type of submit as we'll be posting data now I will be using this container with the class of form group to insert my input so first of all I'm actually going to have one two three four four inputs so I could potentially just paste these four times and the first input that I'm going to add will be a username and as you can see I have a label in here which is for username the input of username has a type of text a class of form control name of username and an ID of username now we need to do exactly the same thing for the rest of the input and I'm thinking of adding an email input in here just to make the register form a little bit more realistic then I'm going to add a password input and then I'm going to add confirm password input as well and let me quickly go through the inputs so for the email one we have a label again which is not so important then we have the input which is a type of email then we have the name of email ID of email and actually we don't need this this comes from this strap and for the password I have type of password then the name is set to password and ID set to password and the last one for the confirmation of password we actually have an input with type of password and name of password one and an ID of password one perfect now this is pretty much our form we won't be building anything else in here except if we do some of the alerts so for example if the username is less than three characters we want to display that on this page as well but we'll get back to this later on now that we have the form let's save it let's go to the actual register page and I'm going to close close bootstrap as we won't need it anymore and let's refresh okay so if we submit this form now you will see that we're getting cannot post slash register and to fix this we need to install the body parser now the body parser was originally included but now we have to install it separately and as we install in more dependencies now we might as well install the express express validator at once and so let's do that if you would open the if you would open the package dot json power we'll see them installed in here in a second so let's close this for now and let's do npm install and as I said we need to install the body dash parser and we need to install the express validator just like this and this will install both of the dependencies for us if we go back you will see that the express validator is installed here and we have the body parser installed here as well so we can start using them now let's quickly start this server again npm start just so we have it working like this and let's include the body parser to or app.js to include the body parser we can actually do this in here and we can do const body parser is equals require and this will be body parser just like this and also let's include the express validator and in here in curly brackets we need to add check and validation result and then this will be equals require express validator save this now we actually need to bring the URL encoded parser and there is a lot of options that you can use but I'm just going to show you the one that is relevant for this tutorial today and to do this we can do const URL encoded parser just like this and this will be equals the body parser then URL encoded and inside here we need to put extended equals false and hopefully that should work for us now we pretty much have everything set but even if we go back to the page and we submit nothing is still happening and this is because we actually haven't set the post router and let's do that now so we can copy this register one in here and instead of app.get we need to put app.post just like this and again we'll be posting to the register page and instead of rest.render we're gonna be doing some other stuff now let's first of all use the URL encoded parser in here just like this save and to check whether this is working what we can do is rest.json and we can do request.body let's take this go back to the browser refresh and see what happens as you can see we're having a json file here displayed username is empty emails empty password is empty and so on so if I was to go back to the page and put right in the username submit this you will see that the body parser is now working which is perfect let's go back and of course if I put password 123 we can submit this and you will see that the password is 123 as well and so on now let's have a look at how we can use the validator to use the validator it's actually fairly simple all we have to do is open an object inside here put comma and this is where all the rules will be so for example let me give you an example if we want to check the username let's say we want to check the username input to see if it's empty or if it's less than three characters we can use the check function and we have to pass the filled name so in this case this will be username then we need to pass some sort of a message just like this and now we can check whether this input actually exists first of all when we can do this by dot exist just like this if you want to perform more checks we can do another dot in here and let's say is length and to check the length for example we can set minimum maximum and so on so for example want to check whether the minimum here the minimum character number is set to three we're pretty much done with the user now but of course that doesn't stop the user from submitting the form and we need to ensure that if we have any errors the user is not able to submit the form to do this let's remove the rest dot json in here and let's just make some space so you can see better and inside here we can set const errors equals validation results and this will be the request like so now inside here we can actually check if errors is not empty which means we have errors and we can maybe do something about it like display a message or if errors is empty then we can let the user proceed with the form submission inside here we can do if errors is not empty is empty and if errors is not empty we can do something about it so for example on the express validator documentation page they have this example of returning rest status 422 json p errors array so let's save this and see what happens so first of all let's navigate to register page and type something so if I type ready and submit you will see that nothing is actually happening and the browser is trying to load and this is because we actually haven't set anything to happen so let me go back to the register page again and let's say I add a username with one letter let's submit this and as you can see here we are getting this json response now saying the value was set to R the message is set to this username must be 3 plus characters long parameter was username the location was body so this is very good it means that the check is actually working and now I'm going to show you how we can do a few more checks before we wrap up with this video so for example let's check for the email let's check whether the email is actually valid to do this we can do exactly the same thing as here we can do check and or email field is called email and then we can say something like email is not valid just like this and then the things that we want to and actually forgot to put comma in here and the things that we want to check for is email we want to do the normalized email as well just like this save this go back and also I wanted to mention that some browsers have inbuilt validation so if I was to submit invalid email address maybe without the ad this won't let me do it but that's not good enough we need to make sure that the validations happens on or server for security reasons but let's say we don't enter an email address which is an invalid email address and submit as you can see now we're getting the username is invalid and also the email is invalid too now this is perfect we can continue building this with the passwords and so on make sure you check the express validator they have so many good use cases there and examples so I'm not going to spend any more time on this okay so let's make this user friendly and display the messages on the actual form and we're pretty much there now so what we have to do is we can use these errors right here so let's actually copy this for now let's remove this or actually I'm going to comment it here and what we can do is let's create a variable alert and this will be equals the errors array and now we can do rest dot render we can render the register page and then we just need to pass this alert variable in here save this and we should be good in here but we also need to use ejs to grab this variable and to grab this array and loop through it to do this we can go back to the register ejs and inside here is where we'll be adding it to make it pretty let's use bush trap so bush trap 5 let's go to bush trap 5 alpha documents components and I'm going to be using alerts so we can use any of these but the one that I want is the dismissible one which has this x here which means you can close it so let's copy this paste it inside here and save so if you were to refresh or registration form here you see that we're getting the holy guacamole message and now we just need to loop through or array and display the messages so let's see how we can do this okay so to loop through the checks we can do this with ejs and what we have to do is check whether the array is undefined and if it is basically we don't have any errors but if it's not then we need to loop through each item and display so save us some time I've actually done this step here which I will explain to you in a second so basically here I'm saying if type of alert is not equals undefined which means that there is errors we want to loop through this dismissible and to do this with ejs it's very similar to javascript we can literally get the alert array and the for reach and basically just display the error message so if I was to save this and go back to the browser refresh and submit you will see that we're getting this username must be free plus characters long and the email is not valid and that's pretty much everything from the tutorial it's super hot in here and this is why I wanted to speed up some of the process everything will be explained in detail on my blog post which I will link in the description below if you did enjoy this video tutorial please subscribe to my channel smash the like button and comment below and that's pretty much everything from me for today I'll see you in the next video