Форум

v.classic · #1 (**permalink**) 26.02.2016, 23:42

Доброго времени суток.
Сделал небольшую форму регистрации. Вопрос в том, как сделать сравнение полей пароль и подтверждение пароля, и, если они разные, выводить сообщение об ошибке?

<!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 { 
	background-color: rgb(238,238,238); margin: 50px auto; width: 335px; padding: 20px 10px 10px; border-radius: 10px;
    box-shadow: 0 0 10px #ccc;
}
.form input { padding: 10px; margin: 0px 5px 5px; width: 300px; box-sizing: padding-box; }
.form .submit { width: 200px; }

рони · #2 (**permalink**) 27.02.2016, 00:30

v.classic,
вешать проверку данных нужно на onsubmit формы и наверно предусмотреть место для вывода ошибки

v.classic · #3 (**permalink**) 27.02.2016, 01:25

Место вывода ошибки - в title.

рони · #4 (**permalink**) 27.02.2016, 02:01

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>

destus · #5 (**permalink**) 27.02.2016, 07:16

рони,
а что насчет 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>

рони · #6 (**permalink**) 27.02.2016, 07:53

destus,
ок но как же 'submit'?

destus · #7 (**permalink**) 27.02.2016, 08:02

Сообщение от рони

destus,
ок но как же 'submit'?

А submit и не будет происходить, если в setCustomValidity передаем непустую строку. Юзать советуешь или нет?

рони · #8 (**permalink**) 27.02.2016, 09:22

Сообщение от destus

А submit и не будет происходить

тоды проверку на пусто нуно и можно если нужны только браузеры с поддержкой HTML5
P.S required

v.classic · #9 (**permalink**) 27.02.2016, 10:05

Спасибо, сам принцип работает. Но как сделать так, чтобы оно показывало, как ошибку, а не просто подсвечивало при наведении как, допустим, в имени?

v.classic · #10 (**permalink**) 27.02.2016, 11:44

Как сделать, чтобы в случае несовпадения пароля поле определялось как invalid?

Форум

Справочник

Discord чат

Курсы javascript