No video

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

  • @RaddyDev
    @RaddyDev4 жыл бұрын

    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

    @RoyerAdames

    3 жыл бұрын

    Where is the link to the blog post?

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    @@RoyerAdames I totally forgot to add it. It's in the description now

  • @Abhishek_Poddar
    @Abhishek_Poddar2 жыл бұрын

    was dying from 24hrs to get exactly what u taught.... sometimes things worksout when u expect them the least to happen ❣️ love you bro

  • @nitinupadhyay9193
    @nitinupadhyay9193 Жыл бұрын

    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.

  • @allanmachado2011
    @allanmachado2011 Жыл бұрын

    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

    @RaddyDev

    Жыл бұрын

    Very kind of you, thank you!

  • @pravinpoudel1307
    @pravinpoudel13073 жыл бұрын

    I have watched some of your videos multiple times but when I saw the number of subscribers today, I am shocked !!!!

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    Too many? haha 😂😂 Thank you for watching and I appreciate the comment! I have planned a lot more Node.js videos 👊😎

  • @pravinpoudel1307

    @pravinpoudel1307

    3 жыл бұрын

    No, i am suprised by the low number of subscribers than what you deserve.

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    I got you haha. Thank you!

  • @supremegangcertifiedleader3916
    @supremegangcertifiedleader39163 жыл бұрын

    Exactly what I was looking for! Thanks! Keep up the good work my guy

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    Glad that you liked the video! Thank you

  • @sibusisondlovu7509

    @sibusisondlovu7509

    3 жыл бұрын

    thank you... what ineeded

  • @haidarghanem
    @haidarghanem11 ай бұрын

    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.

  • @fernandoalcantar4
    @fernandoalcantar43 жыл бұрын

    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

    @RaddyDev

    3 жыл бұрын

    Thank you very much, Fernando! Glad that you found it easy to follow even when English is not your first language

  • @nguyentrieu3607
    @nguyentrieu36073 жыл бұрын

    I read the docs and i dont understand till i watched this video!!! lol

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    haha I am glad that the video was helpful

  • @allanmachado2011
    @allanmachado20113 жыл бұрын

    Another great tutorial. Straight to the point and clear. Many thanks

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    Glad to hear it! Thank you for the comment 🦍👊

  • @Sapphiamur
    @Sapphiamur2 жыл бұрын

    Just what I needed, thank you very much for the helpful tutorial and demonstration!

  • @abdellahhajjam6654
    @abdellahhajjam66543 жыл бұрын

    Always You're Here For us ! Thank You !

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    A little bit late with the new video, but it should be out tomorrow for sure. Thanks for sticking around 👊🦍

  • @ajmaln73
    @ajmaln733 жыл бұрын

    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

    @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.

  • @reboot.rohith4556
    @reboot.rohith45564 жыл бұрын

    *Brad* love you bro. am new to Programming. So thank you for sharing it is useful for my projects.

  • @RaddyDev

    @RaddyDev

    4 жыл бұрын

    Thank you for the being here and I am glad that you found the videos useful. I lot more to come 👊🦍

  • @judithkoelewijn7317
    @judithkoelewijn73172 жыл бұрын

    Great video! Explained very well :)

  • @LushiTrapMusic
    @LushiTrapMusic2 жыл бұрын

    Your tutorial is clear ... Thanks for that 👍👌💯😍

  • @RaddyDev

    @RaddyDev

    2 жыл бұрын

    Thank you!

  • @kapilchauhan7954
    @kapilchauhan79543 жыл бұрын

    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

    @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

  • @nikhilsourav2025
    @nikhilsourav20253 жыл бұрын

    Thank you so much.. this was a perfect explanation..

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    Thanks for watching, brother!

  • @MasterwaveTech
    @MasterwaveTech2 жыл бұрын

    Thank sir, the tutorial is great and easy to understand. Please upload more tutorial for node.js

  • @RaddyDev

    @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

  • @kensleylewis
    @kensleylewis3 жыл бұрын

    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

    @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

  • @fabiod9555
    @fabiod95552 жыл бұрын

    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

    @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

  • @ShubhamSharma-wq8po
    @ShubhamSharma-wq8po3 жыл бұрын

    Perfect explanation and understandable, Thanks..

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    Thank you!

  • @nithishkumar7063
    @nithishkumar70633 жыл бұрын

    I dont know why the alert message is coming eventhough i provide a valid email..Whats the reason?

  • @RaddyDev

    @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

    @nithishkumar7063

    3 жыл бұрын

    @@RaddyDev ,, I tried so much to find the error, but I couldn't. Can I mail you my code??

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    Yeah email me and I can try

  • @decostarkumar2562
    @decostarkumar2562 Жыл бұрын

    Why the alert is not cancellble?

  • @maruzel9916
    @maruzel99163 жыл бұрын

    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

    @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

    @maruzel9916

    3 жыл бұрын

    @@RaddyDev Glad to help :)

  • @Osuran_Bogaa
    @Osuran_Bogaa2 жыл бұрын

    we have to use "" in ejs? and why

  • @RaddyDev

    @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

  • @CyberadictosOficial
    @CyberadictosOficial3 жыл бұрын

    excellent, Greetings from Peru!

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    Thank you! I would love to visit Peru one day

  • @jumbo999614
    @jumbo9996143 жыл бұрын

    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

    @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

    @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.

  • @bidyasagarmohapatra4014
    @bidyasagarmohapatra40144 жыл бұрын

    Thank you so much sir ❤️❤️❤️ from India

  • @RaddyDev

    @RaddyDev

    4 жыл бұрын

    Thank you for watching ♥️

  • @Vue-daigle
    @Vue-daigle3 жыл бұрын

    Thks Raddy for these great on the point videos .... (=)

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    Glad that you like them. Thank you!

  • @cassiocastro7789
    @cassiocastro77892 жыл бұрын

    Thanks for the instructions :)

  • @RaddyDev

    @RaddyDev

    2 жыл бұрын

    Most welcome, Cassio! Thank you for watching

  • @MatiasEsf
    @MatiasEsf2 жыл бұрын

    Amazing! thanks

  • @lonewolfcoding5208
    @lonewolfcoding52083 жыл бұрын

    what if i use hidden field user and password to client stored in browser session?

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    Hey Asturo, you can still validate the inputs. It shouldn't be a problem, if this is what you are asking 🙂

  • @saurabhdubey2588
    @saurabhdubey25883 жыл бұрын

    Nice content as always

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    Thank you!

  • @coderscracker
    @coderscracker Жыл бұрын

    How to get data from user input and show in alert from ejs file.

  • @RaddyDev

    @RaddyDev

    Жыл бұрын

    You can use flash messages for the alert - kzread.info/dash/bejne/noeVk6eCesTWfMo.html So like a search bar?

  • @rayhanmahi57
    @rayhanmahi573 жыл бұрын

    what if i have to do validation on some other page?

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    That shouldn't be a problem. You can do it on any page

  • @crystalscrew4330
    @crystalscrew4330 Жыл бұрын

    i m getting an error that ejs module is not found even it is installed

  • @RaddyDev

    @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

  • @edwingantoniorenteriagarib5054
    @edwingantoniorenteriagarib50542 жыл бұрын

    Ey Raddy, how can I call 'check' and do the validation but in my controller?

  • @RaddyDev

    @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

    @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);

  • @eloisagtm
    @eloisagtm2 жыл бұрын

    Amazing! Thanks!!

  • @RaddyDev

    @RaddyDev

    2 жыл бұрын

    Thank you for watching, Beatriz!

  • @charliebla12
    @charliebla123 жыл бұрын

    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

    @RaddyDev

    3 жыл бұрын

    Did you try importing the express validator in your other file?

  • @kamyk4518
    @kamyk4518 Жыл бұрын

    please could you do it with react in the client side cuz I did't understand it with ejs

  • @RaddyDev

    @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.

  • @puranjayyadav8061
    @puranjayyadav80614 жыл бұрын

    Heavyyy💥💥💥

  • @RaddyDev

    @RaddyDev

    4 жыл бұрын

    To the moon 🚀

  • @kailaspol7299
    @kailaspol72992 жыл бұрын

    Thanks sir

  • @lolithepremium149
    @lolithepremium1492 жыл бұрын

    Hi Raddy, thx for tutorial. May i asked why do you use bodyparser instead of 'express.json'? Ty

  • @RaddyDev

    @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 😄

  • @mayouesleti2342
    @mayouesleti2342 Жыл бұрын

    How to connect this part win the database?

  • @RaddyDev

    @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

  • @DebugWithAdam
    @DebugWithAdam3 жыл бұрын

    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

    @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

    @DebugWithAdam

    3 жыл бұрын

    @@RaddyDev thanks a lot

  • @hongphuong1557
    @hongphuong155711 ай бұрын

    Thanks pro

  • @sonlinesonline
    @sonlinesonline3 жыл бұрын

    thanks a lot for this great video

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    Thanks for the comment, Sally!

  • @ashishkumari-yg4gn
    @ashishkumari-yg4gn Жыл бұрын

    Thank you

  • @RaddyDev

    @RaddyDev

    Жыл бұрын

    You're welcome

  • @ayoubomari1347
    @ayoubomari13473 жыл бұрын

    what if we just validate the form by Vanilla javascript in the browser?

  • @RaddyDev

    @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

    @ayoubomari1347

    3 жыл бұрын

    @@RaddyDev thank you for your repond.

  • @komal3326
    @komal33264 жыл бұрын

    Thank you so much, Sir......:):)

  • @RaddyDev

    @RaddyDev

    4 жыл бұрын

    Thank you for watching! 😊

  • @danko5678
    @danko56782 жыл бұрын

    by the way, now there are native parsers in the express

  • @alii4334
    @alii43342 жыл бұрын

    the video should have the title "express server setup"

  • @RaddyDev

    @RaddyDev

    2 жыл бұрын

    That won't make much sense as the focus is validation. Cheers for the suggestion anyway

  • @raghavmittal5352
    @raghavmittal53523 жыл бұрын

    Sir can you please tell how to show an alert that password and confirm password aren't matching

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    Have a look at the example here: express-validator.github. io/docs/custom-validators-sanitizers.html

  • @codearena4607
    @codearena46074 жыл бұрын

    Nice tutorial thanks Sirs

  • @RaddyDev

    @RaddyDev

    4 жыл бұрын

    Thank you for watching 🦍

  • @sibusisondlovu7509
    @sibusisondlovu75093 жыл бұрын

    thank you

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    Thank you for watching!

  • @yuck59
    @yuck593 жыл бұрын

    is there a way to avoid re rendering the entire page when theres errors?

  • @RaddyDev

    @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

    @neon13x

    3 жыл бұрын

    You can use Ajax

  • @varshiniramesh3752
    @varshiniramesh37523 жыл бұрын

    Thank you so much

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    Thanks for the comment! 🙂

  • @sauravkaushik8194
    @sauravkaushik81943 жыл бұрын

    Can you come up with different methods of express and how to use them ?

  • @RaddyDev

    @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

    @sauravkaushik8194

    3 жыл бұрын

    Let me check your Playlist first.. 😊

  • @Ribyum
    @Ribyum3 жыл бұрын

    Could you show the same thing but with handlebars?

  • @RaddyDev

    @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

    @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 :)

  • @OutsidePro9
    @OutsidePro9 Жыл бұрын

    Can you show me login mysql with nodejs

  • @RaddyDev

    @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.

  • @malkitsingh01
    @malkitsingh014 жыл бұрын

    which theme of vs code? Looks dope.

  • @RaddyDev

    @RaddyDev

    4 жыл бұрын

    Yeah I really like it. It's called Dracula 🧛‍♂️

  • @makymadi242
    @makymadi2424 жыл бұрын

    Thanks Guy

  • @RaddyDev

    @RaddyDev

    4 жыл бұрын

    Thank you

  • @kendouciabdelaliilyas
    @kendouciabdelaliilyas4 жыл бұрын

    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

    @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

  • @codeopold8241
    @codeopold82413 жыл бұрын

    My warning box doesnt close :(

  • @RaddyDev

    @RaddyDev

    3 жыл бұрын

    So you can't submit because of a validation message? You could reference the code my blog / GitHub page

  • @codeopold8241

    @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

    @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

    @RaddyDev

    3 жыл бұрын

    I have updated the article. The example is at the bottom. Thank you for pointing this out

  • @codeopold8241

    @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?