Меню
Что нового?

Проверка ввода подтверждения пароля, в момент ввода.

Yio

Новичок
Доброго времени суток. В php я новичок. И решил начать разбираться сразу с практики. в общем пытаюсь реализовать страничку регистрации. Что бы там были поля :

Логин
Пароль
Подтверждение пароля
Емыло
Капча.


Задумка в том , что бы справа от поля ввода была проверка в режиме реально времени. т.е.
Начинается ввод Логина, я знаю что логин не может быть короче чем 6 символов, и пока ввод не законцен справа от окна должно писать "Логин не может быть короче 5-ти символов".. Ну и так далее.

Тоже самое с подтверждение пароля. Проверять в момент ввода.

Подскажите как это реализуется.

<p><span style="color: #993300;"><span style="font-size: medium;"><label>Ваш логин:<br /></label></span></span></p>
<p><span style="color: #993300;"><span style="font-size: medium;"> </span> <span style="font-size: medium;"><input maxlength="15" name="login" class="sf" size="15" type="text" /></span></span></p> <br />
<span style="color: #993300;"><span style="font-size: medium;"> </span></span><!--**** В текстовое поле (name="login" type="text") пользователь вводит свой логин ***** -->
<p><span style="color: #993300;"><span style="font-size: medium;"> <label>Ваш пароль:<br /></label></span></span></p>
<p><span style="color: #993300;"><span style="font-size: medium;"> </span> <input maxlength="15" name="password"class="sf" size="15" type="password" /></span></p> <br />
<p><span style="color: #993300;"><span style="font-size: medium;"> <label>Подтвердите пароль:<br /></label></span></span></p>
<p><span style="color: #993300;"><span style="font-size: medium;"> </span> <input maxlength="15" name="password_1"class="sf" size="15" type="password" /></span></p> <br />
<p><span style="color: #993300;"><span style="font-size: medium;"> <label>Ваш email:<br /></label></span></span></p>
<p><span style="color: #993300;"><span style="font-size: medium;"> </span> <input maxlength="100" name="email"class="sf" size="15" type="text" /></span></p> <br />
<p><span style="color: #993300;"><span style="font-size: medium;"> <label>Сaptcha:<br /></label></span></span></p>


вот создаю поля для ввода. Далее надо справа от них вставить переменные в которые будут писаться "подсказки"..
 
С.

С.

Продвинутый новичок
Это реализуется с помощью яваскрипта.
 
c0dex

c0dex

web.dev 2002-...
Команда форума
Партнер клуба
Может стоит сначала почитать пару книг по php, html, а потом уже хотеть стольо нетривиальной для новичка задачи? ;) Сделать все просто, на php+html, чтобы работало статично, без подсказок, а вот потом уже добавить JS.
 
peon

peon

Lok'tar ogar
поля ввода была проверка в режиме реально времени. т.е.
Нажмите для раскрытия...
Готовая библиотека
http://livevalidation.com/

Или самому повесить события ввода на поля и обрабатывать через http://rickharrison.github.io/validate.js/ как поступаю я

А тут суть обработки, регистрирую приемник (validation()) на событие ввода (oninput) для поля и проверяю введенное значение, и вывожу сообщение в тег span#message
http://jsfiddle.net/8nvuyuyb/

Но для этого нужно базовое понимание, которое приводится в любом современном учебнике по языку. А учебники и ресурсы сам может найти в гугле.

И еще. Никогда не пиши CSS правила в атрибутах тегов. Это мешает восприятию структуры HTML
 
peon

peon

Lok'tar ogar
scorpion-ds написал(а):
а как это можно сделать? Я, что-то не понял о чем речь.
Нажмите для раскрытия...
Я имел ввиду, что стили нужно хранить отдельно от HTML. То бишь в style.css

<p><span style="color: #993300;"><span style="font-size: medium;"> <label>Сaptcha:<br /></label></span></span></p>

У него видимо редактор втравляет.
 

Yio

Новичок
peon написал(а):
Готовая библиотека
http://livevalidation.com/

Или самому повесить события ввода на поля и обрабатывать через http://rickharrison.github.io/validate.js/ как поступаю я

А тут суть обработки, регистрирую приемник (validation()) на событие ввода (oninput) для поля и проверяю введенное значение, и вывожу сообщение в тег span#message
http://jsfiddle.net/8nvuyuyb/

Но для этого нужно базовое понимание, которое приводится в любом современном учебнике по языку. А учебники и ресурсы сам может найти в гугле.

И еще. Никогда не пиши CSS правила в атрибутах тегов. Это мешает восприятию структуры HTML
Нажмите для раскрытия...
Огромное спасибо.

Код не мой). я где то его нашел и теперь пытаюсь переделать. доделать.
 

Yio

Новичок
как js прикрутить к страничке? как показать место куда выводить подсказки?
На первую часть вопроса ответ примерно знаю)
 
peon

peon

Lok'tar ogar
Смотри на мой пример
оператор
document.getElementById('message').innerHTML = message;
вставляет в тег <span id="message"></span> новое содержимое

message это id тега, в который мы выводим подсказки

ты можешь заменить
var input = document.body.children[0];
на
var input = document.getElementById('field');

добавив в тег id <input id="field" type="text">

прикрутить поместив в тег <script>, перед закрывающем тегом </body>
или вверх документа предварительно обернув код в

Код: 
window.onload = function() {
  //все теги 'загрузились', теперь мы можем манипулировать ими
  //тут код
}
 

Yio

Новичок
<p> <span style="font-size: medium;"><input maxlength="15" name="login" class="sf" size="15" type="text" /></span></p> <span id="message"></span>

<script type="text/javascript">
var input = document.getElementById('login');

input.oninput = function() {

var message;

if (input.value.length < 6) {
message = 'Пароль слишком короткий';
} else {
message = 'Пароль допустимой длины';
}
document.getElementById('message').innerHTML = message;


}
</script>

Совсем туплю?)
 

Yio

Новичок
<p> <span style="font-size: medium;"><input maxlength="15" name="login" id = "login" class="sf" size="15" type="text" /></span></p>
 

Yio

Новичок
теперь вопрос по оформлению.. Когда подсказка появляется - она смещает поле ввода влево. Как это вылечить?)
 
Войдите или зарегистрируйтесь для ответа.
Сверху