CodingStatus

- Learn Coding to Build Web Applications

Node.js Form Validation with an Example

By 14 Comments

Node.js Form Validation: Validation is the most important feature of the form. It is necessary to protect the form from illegal input. So, Node.js  provides the express-validator module to validate the user Input data. In this tutorial, you will know how to validate the form in node.js express.

I have shared the best example with the simple validation script using the express-validator module. Even I will suggest the best & simple way to validate the form. Therefore, give them time to this tutorial and share it with your friend too.

node.js form validation

How to Validate Form Using Express-Validator in Node.js

Now, Configure all the following steps to validate the form.

1. Install Express Application

Install Basic Express Application and create the following required folders & files.

nodeapp/
  |__middlewares/
  |     |__validation-rule.js
  |__controllers/
  |     |__user-controller.js
  |__routes/
  |     |__user-route.js
  |__views/
  |     |__user-form.ejs
  |

2. Install Express Validator Module

First of all, Install express-validator using the following command with npm

nodeapp> npm install –save express-validator

3. Create an HTML Form to Validate

Create an HTML form with input fields like First Name, Last Name, Email Address, Password & Confirm Password. This form will be used to validate the input data. But This form must have the following two attributes –

  • action=”/validate-form”
  • method=”POST”

Path – user-form.ejs

<!DOCTYPE html>
<html>
<head>
<head>
<body>

<form action="/validate-form" method="POST">
          <label>First Name</label>
          <input type="text" placeholder="Enter First Name" name="firstName" value="<%=(typeof inputData!='undefined')? inputData.firstName:''%>">
           <p style="color: red;"><%=(typeof errors!='undefined' && typeof errors.firstName!='undefined' )? errors.firstName.msg:''%></p>
          <label>Last Name</label>
          <input type="text" placeholder="Enter Last Name" name="lastName" value="<%=(typeof inputData!='undefined')? inputData.lastName:''%>">
          <p style="color: red;"><%=(typeof errors!='undefined' && typeof errors.lastName!='undefined' )? errors.lastName.msg:''%></p>
          <label>Email Address</label>
          <input type="email" placeholder="Enter Email Address" name="emailAddress" value="<%=(typeof inputData!='undefined')? inputData.emailAddress:''%>">
          <p style="color: red;"><%=(typeof errors!='undefined' && typeof errors.emailAddress!='undefined' )? errors.emailAddress.msg:''%></p>
          <label>Password</label>
          <input type="password" placeholder="Enter Password" name="password">
          <p style="color: red;"><%=(typeof errors!='undefined' && typeof errors.password!='undefined' )? errors.password.msg:''%></p>
          <label>Confirm Password</label>
          <input type="confirmPassword" placeholder="Enter Confirm Password" name="confirmPassword">
          <p style="color: red;"><%=(typeof errors!='undefined' && typeof errors.confirmPassword!='undefined' )? errors.confirmPassword.msg:''%></p>
          <button type="submit">Submit</button>
          </form>

</body>
</html>

 

4. Write Form Validation Rules

You should create a middleware to write validation rules.

  • First, Include express validator module using require('express-validator')
  • Write all the validation rules within the exports.form=[]

Path – validation-rule.js

const { check,sanitizeBody } = require('express-validator');
exports.form=[
  // first Name validation
  check('firstName').trim().notEmpty().withMessage('First Name required')
  .matches(/^[a-zA-Z ]*$/).withMessage('Only Characters with white space are allowed'),
 // last Name validation
  check('lastName').notEmpty().withMessage('Last Name required')
  .matches(/^[a-zA-Z ]*$/).withMessage('Only Characters with white space are allowed'),
  // email address validation
  check('emailAddress').notEmpty().withMessage('Email Address required').normalizeEmail().isEmail().withMessage('must be a valid email'),
  // password validation
  check('password').trim().notEmpty().withMessage('Password required')
  .isLength({ min: 5 }).withMessage('password must be minimum 5 length')
  .matches(/(?=.*?[A-Z])/).withMessage('At least one Uppercase')
  .matches(/(?=.*?[a-z])/).withMessage('At least one Lowercase')
  .matches(/(?=.*?[0-9])/).withMessage('At least one Number')
  .matches(/(?=.*?[#?!@$%^&*-])/).withMessage('At least one special character')
  .not().matches(/^$|\s+/).withMessage('White space not allowed'),
  // confirm password validation
  check('confirmPassword').custom((value, { req }) => {
       if (value !== req.body.password) {
             throw new Error('Password Confirmation does not match password');
        }
        return true;
   })
]

5. Validate Input data on the form Submit

Now, you have to create a controller to validate the form when you submit input data with the POST method. So, let’s create it through the following steps –

  • Include the express validator and assign it to the validationResult & matchedData
  •  Create a method  userForm with the GET method to display the user form in the browser.
  • Also, create another method validateForm with POST method to validate the input data. This method will be called when you submit the form.

Path – user-controller.js

const { validationResult, matchedData } = require('express-validator');
module.exports={
    userForm:function(req, res) {
        res.render('user-form');
    },
    validateForm:function(req,res){
        const errors= validationResult(req);
        if(!errors.isEmpty()){
          var errMsg= errors.mapped();
          var inputData = matchedData(req);  
    
         }else{
            var inputData = matchedData(req);  
           // insert query will be written here
        }
          res.render('user-form', {errors:errMsg, inputData:inputData});
    }
}

6. Create Routes to Validate Form

Now, Create the following two routes to validate the form

  • Create '/validate-form with the GET method to display the form
  • Also, create /validate-form with POST method to validate the form on the form submit’
  • At last. export the router.

Path – user-route.js

const express = require('express');
const router = express.Router();
const userController=require('../controllers/user-controller');
const validationRule= require('../middlewares/validation-rule');

router.get('/validate-form', userController.userForm);
router.post('/validate-form',validationRule.form, userController.validateForm);

module.exports = router;

 

7. Include the Route in the app.js

At last, Don’t forget to load the following validation route in the main file app.js.

File Name – app.js

var userRouter = require('./routes/user-route');
app.use('/', userRouter);

8. Run Node.js App to Validate the Form

First of All, start the node.js server and enter the following URL in your browser. after that submit the form with input data.  Your input values do not match the validation rule then It will display an error message otherwise it will allow you to submit the form.

http://localhost:3000/validate-form

Here I  have taken a simple form to validate their input data. After learning it, you can implement this code for validating any kind of form like registration, login, contact form & other.

My Suggestion

Dear developers, I hope you have understood the above script and you are able to validate the form in Node.js express. Now, you can easily validate another form in Node.js express

If you have any doubts or questions. You can directly ask me through the below comment box.

Related Posts:

Filed Under: Node.js

Reader Interactions

Comments

  1. Sai Yaswanth says

    Hi, i have one query where can i load validation route in the main file app.,js.
    i am getting an error as .src/App.js line **:** “app” is not defined no-undef

    please help me to rectify this error

    Reply

    • Noor Khan says

      Hi Sai, You need to check the following points

      • Right path of validation route file
      • validationRoute variable must be matched with passing it in app.use() method as a parameter

      Then you error will be definately solved

      Reply

  2. nemesis says

    Hello to eveｒy , ɑs I am actually keen of гeading this wｅb site’s post to be updated daily.
    It consists of good material.

    Reply

  3. Submit Link says

    Hello, I was wandering around online and I saw your site from another site. I read a few of your posts and thought they are well written. Thanks, Ill visit your page again soon.

    Reply

  4. reprimand says

    Ԍ᧐od post. I learn sоmething neԝ and challenging on sites I stumbleupon on a daily basis.
    It’s alwayѕ սѕeful to reaԀ content from other authors
    and use a littlе something from their sites.

    Reply

  5. dynamited says

    I’ѵe been surfing online more than 3 hours today, yet Ӏ never found any interesting artiϲle likе yߋurs.
    It’s ρretty worth enougһ for me. In my view,
    if all web owners and Ƅloggers made good ⅽontent as you
    did, the wеb will be a lot more useful than ever before.

    Reply

  6. cambodia says

    I am trսly happy to glance ɑt this weblog ⲣosts which carries ⅼots of helpful information, thanks for providing tһesе
    data.

    Reply

  7. runge says

    I’m rеally inspiгed along wіth your writing talents and also witһ
    thе structure on your blog. Is this a paid topic or did you modify іt yourself?
    Anywаy stay up the nice quality writing, it’s rare to see a great
    weƅlog like this one nowadays..

    Reply

  8. yemen says

    Hello іt’s me, I am also visiting this web page on a reɡular basis, this web site is
    really nicе and the visitors are realⅼy shaｒing pleasant
    thoughts.

    Reply

  10. ragusan says

    Ι think the admіn of this web site is truly working hard in support of hiѕ site, as
    here every data is quality basｅd stuff.

    Reply

  12. clergyman says

    This is ｒeally intereѕting, You are a very skilled blogɡer.
    I have јoined your RSS feed and loⲟk ahead to seаrching for extra of your fantastіc ⲣost. Аlso, I have shared yoսr site in my ѕocial networks

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *