Node JS Server Side Form Validation using Express-Validator, Body-Parser and EJS
Today we are going to do some server-side form validation using the Express-validator, Body-parser and for the view engine, I will be using 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 usually good practice to validate user input on 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.
Article: raddy.dev/blog...
0:00 Introduction
1:00 Project Overview
3:20 Views & Form
9:34 Form Validation
20:37 Outro
Discounts:
⚡ Hostinger: www.hostg.xyz/...
⚡ Elementor: be.elementor.c...
Recording Equipment:
◾ Microphone: amzn.to/3Ppp8Ok
◾ Shotgun Mic: amzn.to/3IVqIot
◾ Camera: amzn.to/3z0bxpF
◾ Lens: amzn.to/3Pw4s7d
◾ Lighting: amzn.to/3PGXvzW
Computer Gear:
◾ Keyboard: amzn.to/3PGXvzW
◾ Headphones: amzn.to/3PJl9fg
◾ Mouse: amzn.to/3z1TGPf
Connect with me:
◾ Website: www.raddy.dev
◾ Newsletter: www.raddy.co.u...
#nodejs
Пікірлер: 139
I hope that you find the video useful, If you have any tips, tricks or suggestions please let me know. A lot more Node.js videos to come, make sure you subscribe so you don't miss out 😉
@RoyerAdames
3 жыл бұрын
Where is the link to the blog post?
@RaddyDev
3 жыл бұрын
@@RoyerAdames I totally forgot to add it. It's in the description now
was dying from 24hrs to get exactly what u taught.... sometimes things worksout when u expect them the least to happen ❣️ love you bro
Nicely done. I was trying to do this using the client-side validation in vanilla JS. But this is much cleaner. Using ejs just makes it simpler. Thanks for creating this tutorial.
when I search a question and see a Raddy video I know I can trust my time investment because the info will be solid. Thank you bro
@RaddyDev
Жыл бұрын
Very kind of you, thank you!
I have watched some of your videos multiple times but when I saw the number of subscribers today, I am shocked !!!!
@RaddyDev
3 жыл бұрын
Too many? haha 😂😂 Thank you for watching and I appreciate the comment! I have planned a lot more Node.js videos 👊😎
@pravinpoudel1307
3 жыл бұрын
No, i am suprised by the low number of subscribers than what you deserve.
@RaddyDev
3 жыл бұрын
I got you haha. Thank you!
Exactly what I was looking for! Thanks! Keep up the good work my guy
@RaddyDev
3 жыл бұрын
Glad that you liked the video! Thank you
@sibusisondlovu7509
3 жыл бұрын
thank you... what ineeded
man you are amazing each video i watch here i get more and more better than before . God bless you and thank you for your efforts.
thank you for posting a video with a good dynamic, i don't understand any english, but the video has such a good organization that i myself meaningless nothing in english i managed to apply this project to mine, thank you very much you help people you are a good man
@RaddyDev
3 жыл бұрын
Thank you very much, Fernando! Glad that you found it easy to follow even when English is not your first language
I read the docs and i dont understand till i watched this video!!! lol
@RaddyDev
3 жыл бұрын
haha I am glad that the video was helpful
Another great tutorial. Straight to the point and clear. Many thanks
@RaddyDev
3 жыл бұрын
Glad to hear it! Thank you for the comment 🦍👊
Just what I needed, thank you very much for the helpful tutorial and demonstration!
Always You're Here For us ! Thank You !
@RaddyDev
3 жыл бұрын
A little bit late with the new video, but it should be out tomorrow for sure. Thanks for sticking around 👊🦍
hey how add styles on this, so that can some padding, change its postion? please help alert.alert-warning.alert-dismissible.fade.show.style { // css styles rules}
@RaddyDev
3 жыл бұрын
To add custom styles you can do the following: 1) Create a custom folder called "public". Inside it create your css folder and add your stylesheet. In app.js tell express the name of your static files folder: app.use(express.static('public')); 2) In your HTML (ejs) you can now add your stylesheet as you normally would: 3) Customize your alert .alert (add your classes) { .. styles } That's it. I have a full tutorial on EJS that explains all of this if you are not so sure about it. I hope this helps.
*Brad* love you bro. am new to Programming. So thank you for sharing it is useful for my projects.
@RaddyDev
4 жыл бұрын
Thank you for the being here and I am glad that you found the videos useful. I lot more to come 👊🦍
Great video! Explained very well :)
Your tutorial is clear ... Thanks for that 👍👌💯😍
@RaddyDev
2 жыл бұрын
Thank you!
Hey, I'm getting an not able to send response data in body, if I use res.status(422).json(obj.) I'm not able to access obj at client side, but if I do 200 to res.status It works ,. Please help me with this 🙏
@RaddyDev
3 жыл бұрын
Hey, somebody else had the same issue last week and they literally missed one of the lines. Have you got: const alert = errors.array() res.render('register', { alert }) You can reference from the article which is linked in the description. There is also the GitHub link on there too. I hope this helps
Thank you so much.. this was a perfect explanation..
@RaddyDev
3 жыл бұрын
Thanks for watching, brother!
Thank sir, the tutorial is great and easy to understand. Please upload more tutorial for node.js
@RaddyDev
2 жыл бұрын
Thank you! I will do. I am in the middle of uploading one right now and I am working on a big one which is coming soon too
The only thing I would add to this tutorial (for the user's sake) is to return back the input field data that the user originally typed in, especially if it was correct. If we reload the page on validation testing, all the input elements loose the data the user typed in. That is not a good user experience. How would you resolve that?
@RaddyDev
3 жыл бұрын
Hi k lewis, With Bootstrap is fairly easy to do the front-end input validation for a better user experience. They have plenty of great examples on their documentation if you want to do that. Just make sure that you include the Bootstrap JS file in your project. My focus was more on the server-side validation so no dangerous input is being submitted to the server. It's good to have both for good user experience and protection
Tks for the video, I ve been ahead with your example and I failed to compare passwords, it´s never identicals as shown .check('pwd1', 'the passwords are not the same').equals('pwd') .
@RaddyDev
2 жыл бұрын
Hey Fabio, I am not sure what to suggest. Double check your code and have a look online to see if anyone else has had the same issue. There might be an example of how to do it on the express validator website
Perfect explanation and understandable, Thanks..
@RaddyDev
3 жыл бұрын
Thank you!
I dont know why the alert message is coming eventhough i provide a valid email..Whats the reason?
@RaddyDev
3 жыл бұрын
That's strange and it's hard for me to say without seeing the code. Have a look for typos and maybe double-check the documentation. They have tons of great examples
@nithishkumar7063
3 жыл бұрын
@@RaddyDev ,, I tried so much to find the error, but I couldn't. Can I mail you my code??
@RaddyDev
3 жыл бұрын
Yeah email me and I can try
Why the alert is not cancellble?
Thank you for this tutorial! It helped me to better grasp the concept of express-validator:) Maybe you did not realize, that the built-in e-mail validation in HTML5 is blocking the alerts (they work only if the e-mail field is empty or if it contains a valid e-mail address). After disabling the built-in validation by adding the "novalidate" attribute to the form element, everything works just fine :). In your HTML form, there was no "novalidate" and you were demonstrating the final results on an empty form.
@RaddyDev
3 жыл бұрын
The browser validation was kind of annoying and I didn't know that I can disable it by adding novalidate. I need to try it out! Thank you very much for your comment
@maruzel9916
3 жыл бұрын
@@RaddyDev Glad to help :)
we have to use "" in ejs? and why
@RaddyDev
2 жыл бұрын
With typeof operator, we can find the data type. For example, we can check if it's a string, number, boolean.. etc. So we are checking if the errors object that we pass is undefined. You can also check for null. Unfortunately with EJS if you don't check it might give you an error. I hope this helps. I love your photo
excellent, Greetings from Peru!
@RaddyDev
3 жыл бұрын
Thank you! I would love to visit Peru one day
Hi, why I get error " Cannot read property '0' of undefined when my code to try read errors[0].msg? After the line "const errors = validationResult(req)", I console log with "console.log(errors)" I get "Result { formatter: [Function: formatter], errors: [] }". Does it mean 'errors' contains empty array? Is that why I can't use errors[0].msg on it?
@RaddyDev
3 жыл бұрын
it sounds like your errors array is empty. Reference the code from my post or GitHub. It might be something small that you've missed out
@jumbo999614
3 жыл бұрын
Please help. One more question: [ check('name','name is required').not().isEmpty(), check('email','Please enter a valid email address').isEmail(), check('password','password must be 6 character long').not().isEmpty().isLength({min: 6}) ] and [ check('name').not().isEmpty().withMessage('name is required'), check('email').isEmail().withMessage('Please enter a valid email address'), check('password').not().isEmpty().isLength({min: 6}).withMessage('must be 6 character long') ] What's difference? I tried 2nd code and I thought it would fix 'can't read property' problem ,but it didn't work. No response after clicking submit button on the form. Not even error message in browser's inspect page.
Thank you so much sir ❤️❤️❤️ from India
@RaddyDev
4 жыл бұрын
Thank you for watching ♥️
Thks Raddy for these great on the point videos .... (=)
@RaddyDev
3 жыл бұрын
Glad that you like them. Thank you!
Thanks for the instructions :)
@RaddyDev
2 жыл бұрын
Most welcome, Cassio! Thank you for watching
Amazing! thanks
what if i use hidden field user and password to client stored in browser session?
@RaddyDev
3 жыл бұрын
Hey Asturo, you can still validate the inputs. It shouldn't be a problem, if this is what you are asking 🙂
Nice content as always
@RaddyDev
3 жыл бұрын
Thank you!
How to get data from user input and show in alert from ejs file.
@RaddyDev
Жыл бұрын
You can use flash messages for the alert - kzread.info/dash/bejne/noeVk6eCesTWfMo.html So like a search bar?
what if i have to do validation on some other page?
@RaddyDev
3 жыл бұрын
That shouldn't be a problem. You can do it on any page
i m getting an error that ejs module is not found even it is installed
@RaddyDev
Жыл бұрын
You need both express and ejs. Go on your your root folder, where you have app.js and then do "npm install express ejs". Double check your package.json file to see if you have them installed
Ey Raddy, how can I call 'check' and do the validation but in my controller?
@RaddyDev
2 жыл бұрын
Does it not work from your controller? Try requiring the check and validationResult inside the controller itself const { check, validationResult } = require('express-validator')
@edwingantoniorenteriagarib5054
2 жыл бұрын
@@RaddyDev mmm yes It works, Im using body BUT the problem is how can I call the [ this validation] in my controller? the router.post is in my webroutes, router.post('/sendmail', [ body('fullname', 'Nombre.')], function (req, res) { let errors = validationResult(req);
Amazing! Thanks!!
@RaddyDev
2 жыл бұрын
Thank you for watching, Beatriz!
Anyone know how to use this outside of index.js , i am getting a reference error if i try to use it in my router
@RaddyDev
3 жыл бұрын
Did you try importing the express validator in your other file?
please could you do it with react in the client side cuz I did't understand it with ejs
@RaddyDev
Жыл бұрын
I get that, you won't need to use EJS with React. I'll just need to make it work like an API. So displaying json data instead. I might look into making React videos early next year.
Heavyyy💥💥💥
@RaddyDev
4 жыл бұрын
To the moon 🚀
Thanks sir
Hi Raddy, thx for tutorial. May i asked why do you use bodyparser instead of 'express.json'? Ty
@RaddyDev
2 жыл бұрын
You can now use express.json() instead. In earlier versions of Express, the bodyparser was bundled with it. Then when Express 4.0 was released they removed it from express and made it a separate package instead. The syntax was changed from express.json to bodyparser.json and then the body-parser was added back to Express because people wanted it bundled and I guess the syntax changed again to express.json. Unfortunately, I can't update the video unless I re-record it all. I keep leaving notes on my Node.js videos and my blog as NPM packages keep on changing. It's a pain to do Node.js videos 😄
How to connect this part win the database?
@RaddyDev
Жыл бұрын
It's pretty tough to explain in a comment, but there are a ton of examples on KZread. MongoDB can be fairly simple to setup and you can use a free cluster to try it out
Thanks for the content, I like your editor set up, the code completion, suggestion and error coloring, can I know the VS Extensions you're using? and if possible the settings.json copy of your setup? I love it man
@RaddyDev
3 жыл бұрын
Hey Adamu, thank you for the comment! I usually use the free Dracula theme, EsLint and Prettier. I think that everything else is pretty much the default VSC. All of the code is available on my blog - link in the description. 😊
@DebugWithAdam
3 жыл бұрын
@@RaddyDev thanks a lot
Thanks pro
thanks a lot for this great video
@RaddyDev
3 жыл бұрын
Thanks for the comment, Sally!
Thank you
@RaddyDev
Жыл бұрын
You're welcome
what if we just validate the form by Vanilla javascript in the browser?
@RaddyDev
3 жыл бұрын
You can do that and it's probably a good idea for better user experience. Bootstrap has validation methods that you can easily add. Have a look at the bootstrap documentation as they have a lot of good examples. Also don't forget to add the bootstrap js file (there is a CDN version)
@ayoubomari1347
3 жыл бұрын
@@RaddyDev thank you for your repond.
Thank you so much, Sir......:):)
@RaddyDev
4 жыл бұрын
Thank you for watching! 😊
by the way, now there are native parsers in the express
the video should have the title "express server setup"
@RaddyDev
2 жыл бұрын
That won't make much sense as the focus is validation. Cheers for the suggestion anyway
Sir can you please tell how to show an alert that password and confirm password aren't matching
@RaddyDev
3 жыл бұрын
Have a look at the example here: express-validator.github. io/docs/custom-validators-sanitizers.html
Nice tutorial thanks Sirs
@RaddyDev
4 жыл бұрын
Thank you for watching 🦍
thank you
@RaddyDev
3 жыл бұрын
Thank you for watching!
is there a way to avoid re rendering the entire page when theres errors?
@RaddyDev
3 жыл бұрын
You could do it with JavaScript as they are filling up the form. You do still need backend validation as JavaScript on the front end can be easily disabled
@neon13x
3 жыл бұрын
You can use Ajax
Thank you so much
@RaddyDev
3 жыл бұрын
Thanks for the comment! 🙂
Can you come up with different methods of express and how to use them ?
@RaddyDev
3 жыл бұрын
Yes, of course. I've done quite a few videos on Express which you can check out on the channel. Do you have anything specific in mind?
@sauravkaushik8194
3 жыл бұрын
Let me check your Playlist first.. 😊
Could you show the same thing but with handlebars?
@RaddyDev
3 жыл бұрын
I am thinking about it. It would be more or less the same and that's why I am not sure about it 🤔
@Ribyum
3 жыл бұрын
@@RaddyDev Actually yesterday I just managed to finally make it work with handlebars, but the success part doesn't, so I'm trying to figure this one out. But thanks for replying :)
Can you show me login mysql with nodejs
@RaddyDev
Жыл бұрын
I actually started making one a while back and I had to stop as it was taking too long. I will re-visit and see what I can do.
which theme of vs code? Looks dope.
@RaddyDev
4 жыл бұрын
Yeah I really like it. It's called Dracula 🧛♂️
Thanks Guy
@RaddyDev
4 жыл бұрын
Thank you
thank you please could you do a small tutorial or simple app like crud using vuejs and nodejs express mongoose.. based a spa of vuejs
@RaddyDev
4 жыл бұрын
I am definitely going to be covering Node.Js, Express and Mangoose soon and I would love to do Vue, but I am not very familiar with it just yet. I would need a few weeks 😄 For client side I've been using mainly Angular
My warning box doesnt close :(
@RaddyDev
3 жыл бұрын
So you can't submit because of a validation message? You could reference the code my blog / GitHub page
@codeopold8241
3 жыл бұрын
@@RaddyDev I can submit but I can't close the message. They appear if sth is wrong but the close button on the right doesnt work.
@RaddyDev
3 жыл бұрын
I understand now. You have to include the Bootstrap JS files to your project. If you are using the same version as mine 4.5.2 you can just search for "Bootstrap 4.5 CDN" and you will see the scripts that you need to include to your project under the JS section. I totally forgot about that and I only have the CSS there. I will update the blog post soon. I hope this helps
@RaddyDev
3 жыл бұрын
I have updated the article. The example is at the bottom. Thank you for pointing this out
@codeopold8241
3 жыл бұрын
I have an other question: if i wanna compare the password and the confirm password with the check() methode, how can i do it? I've got this so far: app.post('/register', urlencodedParser, [ check("signUpUser", "Username must be at least 3 characters").isLength({ min: 3 }), check("signUpEmail", "Email is not valid").isEmail().normalizeEmail(), check("signUpPassword", "Password must be at least 8 characters").isLength({ min: 8 }), //right below the comment check("signUpPassword", "Passwords do not match").equals(confirmPassword) How can i access this confirm password? I would use req.body.confirmPassword but it doesnt work since i havent defined req and res yet. How can I access this value?