express validator how to get req.validationErrors() to front side?

Question

Hello and thanks for reading. I try to use express-validator. It works fine and block the post if for instance the name input is empty. But I don't know how I can get the error message on the front side. I have tried lot of things without success. Hope somebody can help and sorry for the size of the message. Here is a link to the doc of express validator if it can help ( https://express-validator.github.io/docs/ )

My code... I have create a basic form:

 <form id="sign-in">
      <div class="form-group">
        <label for="nom">name</label>
        <input id="name" type="text" class="form-control" placeholder="name" autocomplete="family-name">
      </div>

      <div class="form-group">
        <label for="username">username</label>
        <input id="username" type="text" class="form-control" placeholder="username" autocomplete="given-name">
      </div>


      <div class="form-group">
        <label for="email">email</label>
        <input id="email" class="form-control" type="email" placeholder="monemail@gmail.com" autocomplete="email"></input>
      </div>

      <div class="form-group">
        <label for="password">password</label>
        <input id="password" class="form-control" type="password" autocomplete="current-password"></input>
      </div>

      <div class="form-group">
        <label for="confirm-password">confirm-password</label>
        <input id="confirm-password" class="form-control" type="password" autocomplete="current-password"></input>
      </div>

      <button type="submit" class="btn btn-primary">sign-in</button>
    </form>
</section>


<footer>
</footer>
<script type="module" src="/js/sign-in.js"></script>

Then I do my fetch on the file sign-in.js:

document.getElementById('sign-in').addEventListener('submit', event => { 
event.preventDefault()

const name = document.getElementById('name').value
const username = document.getElementById('username').value
...

// Use fetch to post data into the DB
window.fetch(`${config.serverHost}/sign-in`, {
  method: 'post',
  body: JSON.stringify({
    name,
    username,
    ...
  })
}).then((res, errors) => {
  if (res.status === 200) {
    window.parent.location.reload()
  } else if (res.status === 422) {
    DONT KNOW WHAT TO DO TO GET MY ERROR MESSAGE
  }
})

})

And finaly the server side:

app.post('/sign-in', (req, res, next) => {
// Start express validator //
  req.checkBody('name', 'Please write your name').notEmpty()
  req.checkBody('username', 'Please write your name').notEmpty()
  ...

  const errors = req.validationErrors()

    if (errors) {
      SEND ME BACK MY ERROR MESSAGE
    } else {
      this part works fine, thank you
    }  
  })

score 0 · Answer 1 · answered May 29 '18 at 18:17

0

You have two options here depending on how your client is setup:

Use either express-flash or connect-flash to send errors back to your view. See this for the differences.
Use res.json to send back the errors object you created from validationErrors(). Be sure to set the appropriate HTTP status as well.

answered May 29 '18 at 18:17

Cisco

20,972
5
38
60

Thank you Francisco, I would like to use the second solution. I have tried to add this on the server file: return res.status(422).json({ errors: errors}) But it does not work, probably because I don't know what to write on the sign-in.js file. – C0G1T0 May 29 '18 at 18:42
You will need to adapt your form then. Something like submitting the form via AJAX and handle the response appropriately. – Cisco May 29 '18 at 19:08

score 0 · Answer 2 · answered May 30 '18 at 20:44

As I found the solution I post it, it may be useful for others. Here is the sign-in.js file:

.then(res => {
  if (res.status !== 200) {
    res.json()
    .then(res => errorsMessages.innerHTML = res.map(e => `<p>${e.msg}</p>`).join(''))
  } else {
    window.parent.location.reload()
  }
})

And the code for the server:

const errors = req.validationErrors()
  if (errors) {
    res.status(422).json(errors)
  } else {...}

Thank you Francisco for your help.

express validator how to get req.validationErrors() to front side?

2 Answers2