Форма регистрации. Изменение цвета иконки при валидации

@SilverXuz · Регистрация: 08.05.2014

Студворк — интернет-сервис помощи студентам

Добрый день!
Есть форма регистрации

Форма регистрации. Изменение цвета иконки при валидации

Иконки слева при наведении на строку формы меняют цвет на голубоватый цвет. Выполнены они через символьный шрифт и записаны таким вот образом

HTML5
1
2
3
4
<p class="field">
<input type="text" name="login" placeholder="Логин" required>
<i class="icon-user icon-large"></i>
</p>

Для данной формы хочу написать двойную валидацию.
Первая выводит обычное echo вот в таком виде при нажатии на кнопку "submit"

Вторую я хочу завязать на цветом мгновенном решении.
Задача.
При начале вводе логина цвет иконки остается таким какой он есть при наведении, то есть голубоватый. А далее при каждом введенном символе должна выполняться проверка по следующим правилам
1. от 3 до 16 символов
2. занятость логина в базе данных пользователей сайта

Итог должен быть такой,
что если логин меньше 3, или выше 16, или в базе данных такой пользователь уже есть, то цвет иконки меняется на другой(например красный)
а если логин от 3 до 16 и в базе данных его нет, то иконка становится, например зеленой.

Тоже самое с паролем и повтором пароля.
Возможно ли совмести оба этих способа валидации? Есть ли в объединении смысл? И собственно как сделать второй способ? (первый уже написан и работает)

Комментарий модератора

Загружайте картинки на форум! Для этого перейдите в расширенный режим редактора и добавьте вложение (кнопка "скрепка").

@Svid_off · 08.05.2014, 17:21

И собственно как сделать второй способ?

а в чем собственно трудность?
Начиная с трех символов аякс запрос и в зависимости от результата менять цвет иконки. Или я что-то не понял?

Тоже самое с паролем и повтором пароля.

- это не совсем понятно: Вы собираетесь принудить пользователь иметь уникальные для Вашей базы пароли?

@SilverXuz · 08.05.2014, 17:31 **[ТС]**

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

а в чем собственно трудность?

трудность в том, что я не программист даже близко)) Начал делать свой сайт. И на банальную форму регистрации убил неделю) Прекрасно понимая, что знающий человек напишет этот код за 10 минут.
Так же и с цветом в формах и запросах, что бы мне написать его самостоятельно я потрачу неделю)) Хотел сэкономить время и обратился сюда за помощью.

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

- это не совсем понятно: Вы собираетесь принудить пользователь иметь уникальные для Вашей базы пароли?

Конечно нет.
Если пароль короче 3 или длиннее 16 символов, иконка красная, если в пределах от 3 до 16, то зеленая.
Собственно повторный пароль будет проверяться лишь по запросу на совпадение.

Если не сложно опишите хотя бы пример запросов на Логин, а уж по аналогии я бы сделал на все поля.

@Svid_off · 08.05.2014, 18:09

Если не сложно опишите хотя бы пример запросов на Логин

Не сложно, но сначала покажите имеющийся у Вас код.

а уж по аналогии я бы сделал на все поля.

для других полей (пароли) аякс запросы Вам не нужны.
Чтобы Вам помочь нужно знать, что из себя представляет Ваш сайт.

По поводу примера запроса на существующий логин. Предполагаю, что у Вас на сервере где-то в БД хранится таблица, скажем 'users', в которой есть поле скажем 'login'. Вам нужно проверить введенный пользователем текст в поле логин на соответствие записям в этой таблице. Предполагаю, что Вы используете в качестве серверного языка php и скажем, у Вас есть некий файл backend.php, который обрабатывает аякс-запросы. Тогда пример запроса может выглядеть так:

JavaScript
1
2
3
4
5
$.post( "backend.php",{action:"check_login", login: "введенный пользователем фрагмент логина"}, function (data){
        if(data.repeat == 1){
        //меняем цвет иконки на красный
           }                                
       }, 'json');

Этот запрос должен быть внутри обработчика события, который у Вас проверяет введенные данные.
Ну, а на серверной стороне в backend.php Вы должны обработать post запрос ($_POST['action']='check_login'), принять и проверить фрагмент логина, сделать запрос с БД на соответствие, вернуть результат (напрмер, 1 - если такой логин уже есть в БД). Это если в самых-самых общих чертах

@SilverXuz · 12.05.2014, 11:52 **[ТС]**

Svid_off,

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

но сначала покажите имеющийся у Вас код

Давайте я попробую описать ситуацию полностью, возможно у меня даже не все файлы нужные для создания имеются. И так.
Совершенно верно сайт пишу в php и html, так как более доступное для не понимающего в программировании человека))
У меня есть верстка нескольких страниц сайта в .html. Сейчас по мере наполнения этих страниц функциями (например регистрация), они переходят в .php.
Я сразу загружаю всё на хостинг, так что с формой можно ознакомиться прямо на сайте http://annsputnik.ru/lcreg.php
На данный момент готова только форма регистрации в php, к авторизации пока не переходил.

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

Предполагаю, что у Вас на сервере где-то в БД хранится таблица, скажем 'users', в которой есть поле скажем 'login'.

Совершенно верно в БД создана таблица с таким именем и полями Login Password и Date

код на странице до <!DOCTYPE...

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php
    if (isset($_POST['submit'])) {
        $login = htmlspecialchars($_POST['login']);
        $password = htmlspecialchars($_POST['password']);
        $r_password = htmlspecialchars($_POST['r_password']);
        $bad = false;
        session_start();
        unset($_SESSION['error_login']);
        unset($_SESSION['error_password']);
        unset($_SESSION['error_r_password']);
        unset($_SESSION['reg_success']);
        if ((strlen($login) < 3) || (strlen($login) >16)) {
            $_SESSION['error_login'] = 1;
            $bad = true;
        }
        if ((strlen($password) < 3) || (strlen($password) >16)) {
            $_SESSION['error_password'] = 1;
            $bad = true;
        }
        if ($_POST["password"] != $_POST["r_password"]) {
        $_SESSION['error_r_password'] = 1;
            $bad = true;
        }
        if (!$bad) {
            $mysqli = new mysqli("", "", "", "");
            $password = md5($password);
            $mysqli->query("INSERT INTO users (`login`, `password`) VALUES ('$login', '$password')");
            $mysqli->close();
            $_SESSION['reg_success'] = 1;
            header("Location: #");
        }
    }
?>

Код формы

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form class="form-2" action="" method="post" id="login_reg">
<p class="field">
<input type="text" name="login" placeholder="Логин" required>
<i class="icon-user icon-large"></i>
</p>
<p class="field">
<input type="password" class="password" name="password" placeholder="Введите пароль" required>
<i class="icon-lock icon-large"></i>
</p>
<p class="field_r">
<input type="password" name="r_password" placeholder="Провторите пароль" required>
<i class="icon-lock icon-large"></i>
</p>
<p class="submit">
<button type="submit" name="submit"><i class="icon-arrow-right icon-large"></i></button>
</p>
</form>

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

у Вас есть некий файл backend.php, который обрабатывает аякс-запросы.

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

Ну, а на серверной стороне в backend.php Вы должны обработать post запрос

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

@Svid_off · 12.05.2014, 18:16

У Вас сделана проверка пароля (и его повтора) пользователя на сервере:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
        if ((strlen($login) < 3) || (strlen($login) >16)) {
            $_SESSION['error_login'] = 1;
            $bad = true;
        }
        if ((strlen($password) < 3) || (strlen($password) >16)) {
            $_SESSION['error_password'] = 1;
            $bad = true;
        }
        if ($_POST["password"] != $_POST["r_password"]) {
        $_SESSION['error_r_password'] = 1;
            $bad = true;
        }

то есть, уже после того, как пользователь отослал форму.
Теперь Вам нужно организовать проверку на стороне клиента, по результатам которой Вы и будите менять цвет иконки. А в случае с логином нужен еще и, как я уже писал, аякс запрос к серверу - чтобы проверить: есть ли такой логин в БД.
Файл backend.php (или любой на Ваше усмотрение) нужен Вам для обработки аякс-запросов.

Проверка на стороне клиента в общем виде будет выглядеть так: Вы вешаете на событие регистрационной формы (или её элемента) обработчик, в котором получаете введенное пользователем значение, проверяете его и в зависимости от проверки меняете или нет цвет иконки.

Новые блоги и статьи Все статьи Все блоги /
Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.