Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.07.2022, 22:08
BBJ BBJ вне форума
Новичок на форуме
Отправить личное сообщение для BBJ Посмотреть профиль Найти все сообщения от BBJ
 
Регистрация: 07.12.2020
Сообщений: 4

Bootstrap валидация паролей
Подскажите, пожалуйста, в официальной документации к Bootstrap 5 описан способ валидации (ссылка). Нам интересен код JS, где устанавливается обработчик на кнопку submit.
1) А как сравнить два пароля? И если они разные - подсветить второй пароль и вывести сообщение, что введенные значения не совпадают.
2) Как можно выводить разные сообщения: если поле пустое - о том, что надо что-то ввести; если пароли не совпадают - уже о том, что они разные.

Я сделал так (см. ниже), оно работает, но выводится в любом случае только то, что указано в
<div class="invalid-feedback">Поле обязательно для заполнения.</div>

То есть нет классификации "типа ошибок".

(() => {
    'use strict'

    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    const forms = document.querySelectorAll('.needs-validation');

    // Loop over them and prevent submission
    Array.from(forms).forEach(form => {
        form.addEventListener('submit', event => {
            const formData = new FormData(form);
            const password = formData.get('Password');
            const repeatPassword = formData.get('ConfirmPassword');                      

            if (!form.checkValidity() || password !== repeatPassword) {                                
                const repeatPassword = document.getElementById('ConfirmPassword');
                repeatPassword.classList.add("is-invalid");
                
                event.preventDefault();
                event.stopPropagation();
            }

            form.classList.add('was-validated');
        }, false)
    })
})()
Ответить с цитированием
  #2 (permalink)  
Старый 07.07.2022, 23:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,296

Сообщение от BBJ
2) Как можно выводить разные сообщения:
<div class="invalid-feedback" ></div>

.invalid-feedback:after{
      content: attr(data-mess);
  }


let mess = '';
if (password !== repeatPassword) {
mess ='они разные'};
if (!password ||!repeatPassword) {
mess ='надо что-то ввести'};
document.querySelector('.invalid-feedback').dataset.mess = mess
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
typeahead bootstrap 3 + bootstrap модальное окно velllum Ваши сайты и скрипты 2 19.10.2015 19:34
Динамическая пагинация в Bootstrap Vlasenko Fedor Ваши сайты и скрипты 0 24.09.2015 19:40
Валидация: unobtrusive и обычная валидация. Как скрестить? dux1 Элементы интерфейса 2 27.07.2015 08:31
AngularJS Bootstrap динамический контент - проблемы с виджетами и связыванием vsimashko Angular.js 2 30.07.2014 18:04
Подключение Bootstrap Markdown Vorobey Библиотеки/Тулкиты/Фреймворки 1 08.05.2013 10:40