express-validator not rendering errors frontend

I’m currently playing around with nodejs, I have passportjs setup and I’m trying to setup some validation for the register form.

Here is what I have currently,

route

// Register :post
router.post('/dashboard/register',
body('firstname').notEmpty().withMessage('First name is required'),
body('lastname').notEmpty().withMessage('Last name is required'),
body('username').notEmpty().withMessage('Username is required'),
body('email').notEmpty().withMessage('An account email is required'),
body('email').isEmail().withMessage('This account email is not valid'),
body('password').notEmpty().withMessage('An account password is required'),
(req, res) => {
  const errors = validationResult(req);

  if (!errors.isEmpty()) {
    res.render('dashboard/register', {
      errors: errors
    });
  } else {
    var newUser = new User({
      firstname: req.body.firstname,
      lastname: req.body.lastname,
      username: req.body.username,
      email: req.body.email,
      password: req.body.password
    });
  
    User.createUser(newUser, function(err, user) {
      if(err) throw err;
      console.log(user);
    });
  };
});

view

{{#if errors}}
  <div class="alert alert-danger">
    {{#each errors}}
      <li>{{msg}}</li>
    {{/each}}
  </div>
{{/if}}

When I trigger the errors I get this

enter image description here

However, if I try

if (!errors.isEmpty()) {
  return res.status(400).json({ errors: errors.array() });
} else {
 ...
};

I get the following

{"errors":[{"value":"","msg":"First name is required","param":"firstname","location":"body"},{"value":"","msg":"Last name is required","param":"lastname","location":"body"},{"value":"","msg":"Username is required","param":"username","location":"body"},{"value":"","msg":"An account email is required","param":"email","location":"body"},{"value":"","msg":"This account email is not valid","param":"email","location":"body"},{"value":"","msg":"An account password is required","param":"password","location":"body"}]}

I’m not sure where I’m going wrong, I have express-validator imported so to me it seems it’s not capturing the errors.

Answer

You are not passing array into render function, use .array() like you did when printing JSON:

const errors = validationResult(req); // this is returning Result object, not array

if (!errors.isEmpty()) {
    res.render('dashboard/register', {
        errors: errors.array() // convert Result to array so it can be rendered
    });
}

Without using .array() the Result object is being passed into your template and it can’t be render.