Показать сообщение отдельно
  #12 (permalink)  
Старый 28.02.2016, 12:46
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

v.classic,
В HTML5 нельзя указать браузеру, чтобы тот проверял валидность данных в поле, после того как в это поле будет что-то введено. Поэтому приходится всякими разными способами искусственным образом вызывать отправку форму с невалидными данными, чтобы показались таблички с ошибками. Этот скрипт выводит сообщение об ошибке, только когда вводим что-то во второе поле.
<style>
        input[type=password]:invalid {
            border: solid 2px red;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var pass1 = document.querySelector('#password'),
                pass2 = document.querySelector('#password-check'),
                submit = document.querySelector('#submit');
            pass1.addEventListener('input', function () {
                this.value != pass2.value ? pass2.setCustomValidity('Пароли не совпадают') : pass2.setCustomValidity('');
            })
            pass2.addEventListener('input', function (e) {
                this.value != pass1.value ? this.setCustomValidity('Пароли не совпадают') : this.setCustomValidity('');
                !pass2.checkValidity() && submit.click();
            })
            submit.addEventListener('click', function (e) {
                pass1.value == '' && e.preventDefault();
            })
        })
    </script>
    <form class="form" action="address.txt" method="get">
        <input id="password" name="password" type="password" placeholder="Пароль">
        <input id="password-check" name="password-check" type="password" placeholder="Подтверждение пароля" title="">
        <input id="submit" name="submit" type="submit" value="Создать аккаунт">
    </form>
Ответить с цитированием