Today we are going to learn how to use Express Validator in a Node.js app to implement server-side validation to validate user data.
In this post, we will understand how to use express-validator module to make the input validation from the server side. We will build a basic Node/Express app with the help of a couple of npm packages such as express-session, express-validator, cookie-parser, etc.
Well, if you consider Man in middle attacks. Security is the most significant expect when it comes to safety and security; a server must not have total faith on the client-side. The client-side validation can be deciphered, or data can be manipulated by just turning off the JavaScript in the browser.
Validation has a significant role in web or mobile application security. No matter whether you build your app using the Express framework or any other Node.js framework.
In this tutorial, we will look at how to validate form data in an Express/Node.js app using a popular open-source npm package called express-validator.
As per their official documentation:
express-validator is a set of express.js middlewares that wraps validator.js validator and sanitizer functions.
To know more about express-validator module refer to their official documentation.
We will create an Express API to make the POST request to the server. If the request gets failed, then we will display the form validation errors for name, email, password and confirm password input fields.
We will install Bootstrap 4 to build the basic form and to display the HTML partials we will use up express-hbs module in our Express/Node app.
Create express input validation project folder for by running the below command.
mkdir express-node-form-validation
Get inside the project directory.
cd express-node-form-validation
Run command to create package.json:
npm init
Next, install nodemon module with --save-dev
attribute for development purpose. This module takes care the server restarting process.
npm install nodemon --save-dev
Next, install following module from npm to build express and node app.
npm install body-parser cookie-parser cors express-session --save
In order to implement input validation we need to install express and express-validator modules.
npm install express express-validator --save
Create app.js file, here in this file we will keep node server settings. Then, go to package.json file and add start: “nodemon app.js” property inside the scripts object and also define main: "app.js"
property.
Here is the final package.json file.
// package.json
{
"name": "express-node-server-side-form-validation",
"version": "1.0.0",
"description": "Express and Node.js server-side form validation tutorial with examples",
"main": "app.js",
"scripts": {
"start": "nodemon app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Digamber",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"cookie-parser": "^1.4.4",
"cors": "^2.8.5",
"express": "^4.17.1",
"express-hbs": "^2.1.2",
"express-session": "^1.17.0",
"express-validator": "^6.2.0"
},
"devDependencies": {
"nodemon": "^1.19.4"
}
}
Next, go to app.js file and include the following code in it.
// app.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const cookieParser = require('cookie-parser');
const session = require('express-session');
// Express settings
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
}));
app.use(cors());
app.use(cookieParser());
app.use(session({
secret: 'positronx',
saveUninitialized: false,
resave: false
}));
// Define PORT
const port = process.env.PORT || 4000;
const server = app.listen(port, () => {
console.log('Connected to port ' + port)
})
Now, we need to install express-hbs module, It’s a handlbars templating view engine. Run below command to install the module.
npm install express-hbs --save
Next, create views folder inside the express input validation project folder. And, also create partials folder within the views folder, following will be the folder architecture views > partials.
Then, create public folder inside the express validation folder. Also, create css and js folder inside the public folder.
Next, Download Bootstrap and take bootstrap.min.css and bootstrap.min.js files and put inside their respective folders inside the public folder.
Create user.hbs file using Bootstrap inside views/partials/ folder, add the following code.
<!-- user.hbs -->
<html lang="en">
<head>
<title>Express Node Form Validation</title>
<link href="../../public/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../../public/css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="#">Express Form Data Validation</a>
</nav>
<div class="container">
<div class="col-md-12">
<form method="post" action="">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" />
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" name="email" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password" />
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" class="form-control" name="confirm_password" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger btn-block">Create</button>
</div>
</form>
</div>
</div>
</body>
</html>
Next, add express handlebars view engine settings in app.js file.
// app.js
const hbs = require('express-hbs');
// Serve static resources
app.use('/public', express.static('public'));
// Render View
app.engine('hbs', hbs.express4({
partialsDir: __dirname + '/views/partials'
}));
app.set('view engine', 'hbs');
app.set('views', __dirname + '/views/partials');
Run following command and check the user form in the browser on this url http://localhost:4000/user.
npm start
Now, create express routers to make the POST and GET requests using Express.js. Create routes folder and create user.routes.js file inside of it and paste the given below code.
// routes/user.routes.js
const express = require("express");
const session = require('express-session');
const router = express.Router();
const { check, validationResult } = require('express-validator');
router.post('/create-user',
[
check('name')
.not()
.isEmpty()
.withMessage('Name is required'),
check('email', 'Email is required')
.isEmail(),
check('password', 'Password is requried')
.isLength({ min: 1 })
.custom((val, { req, loc, path }) => {
if (val !== req.body.confirm_password) {
throw new Error("Passwords don't match");
} else {
return value;
}
}),
], (req, res) => {
var errors = validationResult(req).array();
if (errors) {
req.session.errors = errors;
req.session.success = false;
res.redirect('/user');
} else {
req.session.success = true;
res.redirect('/user');
}
});
router.get('/', function (req, res) {
res.render('user', {
success: req.session.success,
errors: req.session.errors
});
req.session.errors = null;
});
module.exports = router;
router.post()
method.check()
method and passed the input validation name in it, and used the .not(), .isEmpty() methods in it. To display the error message we used the .withMessage() method.Next, go to app.js and add the express user router.
// app.js
// User router
const user = require('./routes/user.routes');
// Initiate API
app.use('/user', user)
To show the validation errors in the handlebar view template. Go, to views/partials/user.hbs file and add the following code in it.
<!-- user.hbs -->
<html lang="en">
<head>
<title>Express Node Form Validation</title>
<link href="../../public/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../../public/css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="#">Express Form Data Validation</a>
</nav>
<div class="container">
<div class="col-md-12">
{{# if errors }}
{{# each errors }}
<p class="alert alert-danger">{{ this.msg }}</p>
{{/each}}
{{/if}}
<form method="post" action="/user/create-user">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" />
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" name="email" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password" />
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" class="form-control" name="confirm_password" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger btn-block">Create</button>
</div>
</form>
</div>
</div>
</body>
</html>
Finally, we have completed Express Validator Tutorial with Input Validation in Node.js. Such as name, email, password and confirm password, share with others if you liked this tutorial. Thank you !
#node.js #express #npm #api #wevdev