Экспресс валидатор, как получить req.validationErrors () на лицевой стороне?

Question

Привет и спасибо за чтение.Я пытаюсь использовать экспресс-валидатор.Он работает нормально и блокирует сообщение, если, например, ввод имени пуст.Но я не знаю, как я могу получить сообщение об ошибке на лицевой стороне.Я перепробовал много вещей без успеха.Надеюсь, что кто-то может помочь и извините за размер сообщения.Вот ссылка на документ экспресс-валидатора, если он может помочь (https://express -validator.github.io / docs / )

Мой код ... Я создал базовый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> 

Затем я выбираю файл 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
  }
})

})

И, наконец, на стороне сервера:

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
    }  
  }) 

Answer 1

Поскольку я нашел решение, которое я отправляю, оно может быть полезно для других.Вот файл sign-in.js:

.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()
  }
})

И код для сервера:

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

Спасибо, Франциско, за вашу помощь.

Answer 2

У вас есть два варианта в зависимости от настройки вашего клиента:

1. Используйте express-flash или connect-flash для отправки ошибок назад.на ваш взгляд.См. this о различиях.
2. Используйте res.json для отправки обратно errors объекта, который вы создали из validationErrors().Обязательно установите соответствующий статус HTTP.