Ошибка setCustomValidity, но форма отправляется

Я использую функцию setCustomValidity, чтобы проверить, равны ли новый пароль и повторный пароль, но я отладил код, и сравнение было правильным, но сообщение об ошибке не отображается, а запрос на публикацию формы выполнен.

 <form action = "/register" method = "post" onsubmit = "check_new_password()">
                <div class = "form-group">

и джаваскрипт

 function check_new_password(){
    var new_pass = $('#new-password').val();
    var repeated_pass = $('#repeat-password').val();

    if (new_pass != repeated_pass){
       $('#repeat-password')[0].setCustomValidity('Password are not equals');
    }else{
      $('#repeat-password')[0].setCustomValidity('');
 }

javascript html

10.12.2020 19:28

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

225

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно добавить оператор return в атрибут onsubmit, например:

onsubmit = "return check_new_password();"

Итак, функция check_new_password() должна возвращать логическое значение в соответствии с проверкой.

Не забудьте вызвать метод .reportValidity();, потому что вы используете метод HTMLObjectElement.setCustomValidity().

Кроме того, вы должны добавить oninput = "setCustomValidity('');" в поля ввода, чтобы принудительно обновить его состояние.

См. в этом примере:

function check_new_password() {
  var new_pass = $('#new-password').val();
  var repeated_pass = $('#repeat-password').val();

  if (new_pass != repeated_pass) {
    $('#repeat-password')[0].setCustomValidity('Password are not equals.');
    $('#repeat-password')[0].reportValidity();
    return false;
  } else {
    $('#repeat-password')[0].setCustomValidity('');
    return true;
  }
}

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "container">
  <form action = "/register" method = "post" onsubmit = "return check_new_password();">
    <div class = "form-group">
      <label for = "new-password">Password:</label>
      <input id = "new-password" class = "form-control" type = "password" oninput = "setCustomValidity('');" />
    </div>
    <div class = "form-group">
      <label for = "repeat-password">Repeat Password:</label>
      <input id = "repeat-password" class = "form-control" type = "password" oninput = "setCustomValidity('');" />
    </div>
    <div>
      <button class = "btn btn-xs btn-primary" type = "submit">Send</button>
    </div>
  </form>
</div>

11.12.2020 00:03

Другие вопросы по теме

Ориентация на HTML-идентификаторы, сгенерированные PHP с использованием эха

Базовый макет Bootstrap 4, вложенный контейнер внутри container-fluid

Изображение не загружается на веб-сайт, но загружается локально

Я не могу связать свой html-файл с другим html-файлом

Создание кнопки, которая выводит приветствие

Использование .addClass для элементов атрибутов данных с определенными значениями

Как разделить панель навигации на две части в одной строке?

Почему я не могу открыть URL-адрес в iframe с помощью javascript?

Тело { высота: 1000 пикселей; } в файле css не работает, но работает встроенно

RMarkdown - наличие условного заголовка (текстового заголовка перед таблицей)

Ошибка setCustomValidity, но форма отправляется

Ответы 1

Другие вопросы по теме

Похожие вопросы