Node JS Server Side Form Validation using Express-Validator, Body-Parser and EJS

hi everybody my name is radi and you're watching my channel riley the brand today we're going to do some server-side form validation using the express validator body parser 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 validator 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 ejs 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 body pricer 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 ejs 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 ejs and the first one is or index page which is kind of or 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 or 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 powershell but of course if your mac you can use the terminal or you can just start a terminal in visual studio code i just prefer powershell and for some reason the terminal for me looks very blurry or in visual studio code and let's start the application and look at some of the views to do this i'm going to do npm 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.ejs 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 soul or form looks a little more presentable of course this is not required so first of all let's do an html5 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 see the end okay i'm going gonna grab the cdn from here copy paste it here and let's do view toggle will 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 live with the 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 localhost and as you can see bootstrap is working we have or register link as well so if we 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 it 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 b to be registered 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 our form to do this again i'm going to be using bootstrap and let's go to component 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 for now and we'll beat it from scratch actually first of all before we start building our form the 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 this 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 racetrap 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 password1 and an id of password1 perfect now this is pretty much or 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 were to submit this form now you'll 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 were to open the if you would open the package.json file will 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 person and we need to install the express validator just like this enter this will install both of the dependencies for us if we go back you see that the express value that is stored here and we have the body parser installed here as well so we can start using them now let's quickly start the server again npm start just so we have it working like this and let's include the body parser to or up dot js to include the body passer we can actually do this in here and we can do const body is equals require and this will be body parcel just like this and also let's include the express validator and in here in curly bracket 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 euro encoder passer 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 password just like this and this will because the body parser then euro 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 going to be doing some other stuff now let's first of all use the euro encoded person 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 save 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 email is empty password is empty and so on so for us to go back to the page and put right in the username submit this you'll see that the body parser is now working which is perfect let's go back and of course if i put password one two three we can submit this and you will see that the password is one two three as well and so on now let's have a look at how we can use the validator to use the validator is 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 uh field 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 and we can do this by dot exists 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 i 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.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 aries 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 jsonp aries 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 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 had 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 three 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 i actually forgot to put comma in here and the things that we want to check for is this email we want to do the normalize 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 uh 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 our 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 this arrows array here so let's actually copy this for now let's remove this or actually i'm going to commented here and what we can do is let's create a variable alert and this will be equals the arrows array and now we can do res 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 bootstrap so extra five let's go to bootstrap five alpha document component and i'm going to be using alerts so we can use any of these but the one that i want is the dismissable 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 live through or array and display the messages so let's see how we can do this okay so to look 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 arrows but if it's not then we need to live through each item and display so save us some time i've actually done this step here uh 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 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 this tutorial it's super hot in here this is why i wanted to speed up some of the process um everything will be explained in detail on my blog post which i'll 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

Channel: RaddyTheBrand

Views: 41,819

Keywords: node, nodejs, express, express-validator, body-parser, nodejs body-parser, nodejs body parser, nodejs express validator, node js tutorial, node js, express js tutorial, node js for beginners, server side validation, form validation, ejs, view engine, bootstrap, javascript, javascript tutorial, javascript tutorial for beginners, raddy, raddythebrand, raddy the brand

Id: z8m_Vy_9FIs

Length: 21min 7sec (1267 seconds)

Published: Fri Aug 14 2020