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) }) })() |
Цитата:
<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 |
Часовой пояс GMT +3, время: 02:04. |