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

@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 (или любой на Ваше усмотрение) нужен Вам для обработки аякс-запросов.

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

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .