Welcome folks today in this blog post we will be implementing server side form validation with custom error messages using express-validator library in javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new node.js project using the below command as shown below
npm init -y
npm i express
npm i express-validator
And after that you need to make an index.js file and copy paste the following code
index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const express = require('express'); const { body, validationResult } = require('express-validator'); const app = express(); app.use(express.urlencoded({ extended: false })); app.use(express.json()); app.use(express.static('public')) app.get('/',(req,res) => { res.sendFile('index.html') }) app.listen(3000, () => { console.log('Server started on port 3000'); }); |
As you can see we are importing the express and express-validator libraries and then we are making a simple route to the / endpoint where we are loading the index.html template when user goes to the home page
Now we need to make the index.html inside the public folder as shown below
public/index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Express-Validator Example</title> </head> <body> <form> <input type="text" name="name" placeholder="Enter name"> <input type="email" name="email" placeholder="Enter email"> <input type="submit" value="Register"> </form> <div class="error-messages"> </div> <div id="success"> </div> </body> </html> |
As you can see we have a simple html5 user form where we have two fields for the user to enter the name and the email and then we have the submit button. And then we have the two div elements where we will be showing the error and success messages for the form validation.
AJAX Code to Make Fetch Request
Now guys we will be writing the client side ajax code to make a simple fetch call to the backend api to pass the user data to validate it and show the messages returned as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<script> const form = document.querySelector('form'); const errorMessages = document.querySelector('.error-messages'); form.addEventListener('submit', event => { event.preventDefault(); errorMessages.innerHTML = '' document.getElementById('success').innerHTML = '' const formData = new FormData(form); fetch('/submit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: formData.get('name'), email:formData.get('email') }) }) .then(response => response.json()) .then(data => { if (data.errors) { errorMessages.innerHTML = ''; data.errors.forEach(error => { const li = document.createElement('li'); li.textContent = error.msg; errorMessages.appendChild(li); }); } else { // Handle successful form submission document.getElementById('success').innerHTML = data.msg } }) .catch(error => { console.error(error); }); }); </script> |
As you can see we are using the fetch call which is built in inside the browser and we are using the formData object to get the name and the email and also we are passing the headers which is for json. And then we are showing the custom error messages returned from the backend.
Now we need to write the /submit endpoint where we will be submitting the user data to validate and show error messages as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
app.post('/submit', [ body('name') .trim() .notEmpty() .withMessage("Please enter the name") .isLength({ min: 2, max: 10 }) .withMessage('Name must be between 2 and 10 characters') .isAlpha() .withMessage('Name must only contain letters'), body('email') .trim() .notEmpty() .withMessage("Please enter the email") .isEmail() .withMessage("Please provide a valid email") ], (req, res) => { console.log(req.body.name) const errors = validationResult(req); if (!errors.isEmpty()) { return res.status(422).json({ errors: errors.array() }); } res.status(200).json({msg:"form is validated"}) }); |
As you can see we are passing the express-validator as middleware to the request coming and then we are applying different validators to the name and email alongside with showing custom error messages for each validator. And lastly we can send these error messages as json response back to the client as shown below
