express-validator not rendering errors frontend-CodePudding

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

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.

CodePudding user response：

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.