How to Implement Form Validation in Node.js and Express Using Express-Validator

How to Implement Form Validation in Node.js and Express Using Express-Validator

Handling user input safely is one of the most critical responsibilities of backend development. Accepting unvalidated data can lead to corrupted databases, broken application states, and severe security vulnerabilities like injection attacks.

In this tutorial, we will walk through how to build robust form validation in a Node.js application using Express, EJS, Body-Parser, and the express-validator library.

Prerequisites & Tech Stack

Make sure you have Node.js installed on your system. We will be using the following packages:

  • Express: Fast, unopinionated web framework for building Node.js applications.
  • Body-Parser: Middleware to extract incoming request data and expose it on req.body.
  • Path: Built-in Node.js module for working with file and directory paths.
  • Express-Validator: A set of Express middleware wrappers for the validator.js library used to validate and sanitize input fields.
  • EJS: Embedded JavaScript templating engine for dynamic views.

Step 1: Set Up the Project Folder

Open your terminal or command prompt and run the following commands to create and enter your project directory:

mkdir validations
cd validations

Initialize your workspace. This creates a package.json configuration file, which tracks your project's metadata and dependencies:

npm init -y

Step 2: Install Required Packages

Install Express, EJS, Body-Parser, and Express-Validator in a single command:

npm install express ejs body-parser express-validator

Step 3: Configure Project Scripts

Open your newly created package.json file and add a "start" script under the "scripts" configuration block so you can run your app cleanly:

"scripts": {
  "start": "node app.js"
}

Next, create your application entry point file named app.js in the root directory, along with a views folder containing a register.ejs file.

Step 4: Write the Express Server and Validation Logic (app.js)

Create app.js and add the following code. This script sets up Express, handles route mapping, and applies express-validator rules for name, email, and phno fields.

var express = require('express')
var bodyParser = require('body-parser')
var path = require('path')
var {check, validationResult} = require('express-validator')

var app = express();

app.set("views", path.resolve(__dirname, 'views'))
app.set('view engine', 'ejs')

app.use(bodyParser.urlencoded({extended: false}))

app.get('/', (req, res) => {
    res.render('register', {data: {}})
})

app.post('/', 
    check('name').isLength({min: 5}).withMessage("enter name ").isAlpha().withMessage('name should have alphabets only'),
    check('email').isEmail().withMessage('enter valid email'),
    check('phno').isMobilePhone().withMessage('enter correct number'),
    (req, res) => {
        var err = validationResult(req);
        if(!err.isEmpty()){
            res.render('register', {data: err.array()})
        } else {
            res.redirect('/')
        }
    }
)

var port = process.env.PORT || 3000;
app.listen(port, () => console.log(`server is running at ${port}`))

module.exports = app;

Code Breakdown:

  • path.resolve(__dirname, 'views'): Tells Express exactly where your views directory is located.
  • app.set('view engine', 'ejs'): Instructs Express to render any file ending in .ejs using the EJS template engine.
  • check(): Analyzes specific incoming request fields and attaches validation rules (such as minimum length, alphabetic constraint, email structure, or phone number compliance).
  • validationResult(req): Collects any validation errors identified by check() and formats them into an accessible array via err.array().

Step 5: Create the View Template (views/register.ejs)

Create a folder named views, and inside it, create a file named register.ejs. This template checks for validation errors passed from the server and displays them dynamically in a loop above the registration form.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Node.js Form Validation Tutorial</title>
</head>
<body>
    <% if(data.length > 0) {%>
        <% for(var i=0; i < data.length; i++){%>
            <div style="color: red;">
                <%= data[i].msg%>
            </div>
        <%}%>
    <% } %>
    
    <form action="/" method="POST">
        <input type="text" name="name" placeholder="enter the name"><br><br>
        <input type="text" name="email" placeholder="enter email"><br><br>
        <input type="text" name="phno" placeholder="enter phno"><br><br>
        <input type="submit" value="register"><br>
    </form>
</body>
</html>

Step 6: Run and Test Your Application

  • Start your server in your terminal:
    npm start
  • Open your web browser and navigate to:
    http://localhost:3000

References & Source Code

Source Code: Download the code from GitHub

Video Tutorial: Watch Video Tutorial on YouTube

Comments

Post a Comment

Popular posts from this blog

How to Setup a Flask Project in Python: Step-by-Step Guide

Image
Prerequisite Python What Is Flask ? Flask is a lightweight Web framework written in Python. It is developed by  Armin Ronacher. Flask is based on the Werkzeug WSGI toolkit and Jinja2 template engine Setup Development Environment First Install Virtualenv In Python virtualenv  is a virtual python environment builder.virtualenv    is used to manage python packages for different projects. Using virtualenv allows you to avoid installing python packages globally which could break system tools or other projects. Install the virtualenv using the following command.This command needs administrator privileges # pip install virtualenv After installing the virtualenv . Make Folder create new folder using the following command  # mkdir flaskdemo change to the current created directory/folder # cd flaskdemo Create a Virtual Environment for Flask In Folder Now we will create a virtualenv .  The commands below will c...
Read more

How to Hash Passwords in Node.js Using Bcryptjs, Express and Mongoose

Introduction Storing plaintext passwords in a database is one of the most critical security vulnerabilities a web application can have. If a database is compromised, every user account is instantly exposed. To protect user credentials, modern backend applications rely on secure cryptographic hashing functions like bcrypt . In this tutorial, we will walk through how to build a secure user registration and login API in Node.js using Express, Mongoose, and bcryptjs . What is Bcrypt? Bcrypt is a password-hashing function designed by Niels Provos and David Mazières, based on the Blowfish cipher, and introduced at USENIX in 1999. Built-in Salt Protection: Bcrypt automatically incorporates a salt (random data) into the hashing process to protect against rainbow table attacks. Adaptive Work Factor: It is an adaptive function, meaning the iteration count (cost factor) can be increased over time to keep pace with growing computer processing power, making it highly resistant to ...
Read more

How to Upload Images in Node.js and Express Using AJAX and jQuery

How to Upload Images in Node.js and Express Using AJAX and jQuery Handling asynchronous file uploads without refreshing the page provides a seamless user experience. In this tutorial, we will explore how to upload an image file using AJAX and jQuery in a Node.js and Express application. We will use the browser's FileReader API to read the selected file as a Data URL, send the Base64-encoded payload to the server via AJAX, and save it directly to the server using Node's fs (File System) module. Project Structure Your project directory should be structured as follows: upload/ ├── views/ │ └── demo.ejs ├── app.js └── package.json Step 1: Set Up Your Project Folder Open your command prompt or terminal and initialize a new directory for your project: mkdir upload cd upload Step 2: Initialize Node.js and Install Dependencies Initialize your Node.js environment by creating a package.json f...
Read more