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>
