| v.classic | 27.02.2016 10:05 |
Спасибо, сам принцип работает. Но как сделать так, чтобы оно показывало, как ошибку, а не просто подсвечивало при наведении как, допустим, в имени?
Сравнение паролей в форме регистрации
Доброго времени суток.
Сделал небольшую форму регистрации. Вопрос в том, как сделать сравнение полей пароль и подтверждение пароля, и, если они разные, выводить сообщение об ошибке?
<!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?
|
v.classic,
не знаю |
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>
|
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
input:focus:invalid {
color: #f00;
}
</style>
</head>
<body>
<input pattern="\d+" />
</body>
</html>
|
Цитата:
|
Цитата:
Ну тут надо определится, ибо сообщения показываются при отправке формы, и это логично. Да и вообще, к нативной проверке валидности сравнение значений двух полей отношения не имеет, хотя можно в качестве pattern у поля имеющего фокус подставлять значение оппозитного поля. |
| Часовой пояс GMT +3, время: 08:00. |