Валидация формы и кастомная ошибка

Question

Всем привет. У меня кастомная ошибка выскакивает только при втором клике по кнопке "отправить", а если выводить alert, то его показывает при первом же клике. Как сделать так, чтоб ошибку показывало при первом клине?

'use strict';
let form = document.querySelector(".form");
let password = document.querySelector(".form__input--password");
let passwordRepeat = document.querySelector(".form__input--repeat-password");

form.onsubmit = (evt) => {
  if (passwordRepeat.value !== password.value) {
    evt.preventDefault();
    passwordRepeat.setCustomValidity('повтор пароля не соответствует заданному ранее паролю');
  }
};

<form action="some.serv.com" method="post" class="form">
    <span class="form__title">Регистрация</span>
    <label for="email" class="form__label form__label--email">
      E-mail
      <input type="email" id="email" name="email" class="form__input form__input--email" placeholder="[email protected]" required="">
    </label>

    <label for="password" class="form__label form__label--password">
      Пароль
      <input type="password" id="password" name="password" class="form__input form__input--password" placeholder="password" minlength="6" maxlength="20" required="">
    </label>

    <label for="repeat-password" class="form__label form__label--repeat-password">
      Повторите пароль
      <input type="password" id="repeat-password" name="repeat-password" class="form__input form__input--repeat-password" placeholder="password" minlength="6" maxlength="20" required="">
    </label>

    <label for="name" class="form__label form__label--name">
      ФИО
      <input type="text" id="name" name="name" class="form__input form__input--name" placeholder="Игорев Игорь Игоревич" minlength="3" required="">
    </label>

    <label for="age" class="form__label">
      Возраст
      <input type="number" id="age" name="age" class="form__input form__input--age" placeholder="18" max="150" required="">
    </label>

    <div class="form_control">
      <button class="form_button form_button--submit">Отправить</button>
      <button class="form_button form_button--cancel">Отмена</button>
    </div>
  </form>

Answer 1

После установки ошибки нужно вызвать метод reportValidity. Вот тут написано об этом - https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity

БЛОГ НА HUSL

Валидация формы и кастомная ошибка

Ответы (1 шт):