Сравнение паролей в форме регистрации
Доброго времени суток.
Сделал небольшую форму регистрации. Вопрос в том, как сделать сравнение полей пароль и подтверждение пароля, и, если они разные, выводить сообщение об ошибке? <!DOCTYPE html> <html> <head> <title>Форма регистрации</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css" /> </head> <body> <form class="form" action="address.txt" method="get"> <input id="name" name="name" type="text" placeholder="Логин" pattern="[a-zA-Zа-яА-ЯёЁ0-9]{4,90}" title="Имя должно состоять от 4 до 90 символов. Допускаются только цифры, буквы русского и латинского алфавита" required> <input id="email" name="email" type="email" placeholder="E-mail" title="" required> <input id="password" name="password" type="password" placeholder="Пароль" pattern="[a-zA-Zа-яА-ЯёЁ0-9]{6,90}" title="Пароль должен состоять от 6 до 90 символов. Допускаются только цифры, буквы русского и латинского алфавита" required> <input id="password-check" name="password-check" type="password" placeholder="Подтверждение пароля" title="" required> <input id="pediki" name="pediki" type="text" placeholder="Поле, необязательное для заполнения"> <input id="submit" name="submit" type="submit" value="Создать аккаунт"> </form> <script> </script> </body> </html> Код:
.form { |
v.classic,
вешать проверку данных нужно на onsubmit формы и наверно предусмотреть место для вывода ошибки |
Место вывода ошибки - в title.
|
v.classic,
<!DOCTYPE html> <html> <head> <title>Форма регистрации</title> <meta charset="utf-8"> <style type="text/css"> [title="err"]{ border: solid 2px red; } </style> </head> <body> <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> <script> window.addEventListener('DOMContentLoaded', function() { var form = document.querySelector('.form'), pas = form.querySelectorAll('#password, #password-check'); form.addEventListener('submit', function(e) { var err = !(pas[0].value && (pas[0].value == pas[1].value)) pas[1].setAttribute("title", err ? 'err' : ''); err && e.preventDefault(); }, false); pas[1].addEventListener('input', function(e) { var err = !(pas[0].value == pas[1].value) pas[1].setAttribute("title", err ? 'err' : ''); }, false); }); </script> </body> </html> |
рони,
а что насчет setCustomValidity? Или не советуешь? Намного короче получается. <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') pass1.addEventListener('input', function () { this.value != pass2.value ? pass2.setCustomValidity('Password incorrect') : pass2.setCustomValidity('') }) pass2.addEventListener('input', function (e) { this.value != pass1.value ? this.setCustomValidity('Password incorrect') : this.setCustomValidity('') }) }) </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> |
destus,
ок но как же 'submit'? |
Цитата:
|
Цитата:
P.S required |
Спасибо, сам принцип работает. Но как сделать так, чтобы оно показывало, как ошибку, а не просто подсвечивало при наведении как, допустим, в имени?
|
Как сделать, чтобы в случае несовпадения пароля поле определялось как invalid?
|
Часовой пояс GMT +3, время: 04:15. |