Проверка формы "на лету" на наличие вводимого логина в MySQL

@Novichek_9I · Регистрация: 31.03.2015

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

Хочу реализовать следующее: пользователь при регистрации вводит логин, и форма сразу проверяет, существует данный логин в БД или нет, на дожидаясь, пока пользователь нажмет кнопку "Отправить".
Я реализовал обычную проверку при нажатии кнопки. А вот сделать "на лету" не могу. Кажется, это нужно делать через AJAX, но рабочий пример не могу найти.
Вот html-форма:

HTML5
1
2
3
4
5
<form method='post' action='signup.php'>$error
            <span>Login</span>
                <input type="text" name="user" placeholder="Введите логин">
                <span id="user_failed"></span>
<input type="submit" value="Отправить">

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
require_once 'header.php';
 
    $error = $user="";
 
    if (isset($_SESSION['user'])) destroySession();
 
    if (isset($_POST['user']))
        {
            $user = ($_POST['user']);
            
            if ($user == "")
                $error = "Введите данные во все поля<br><br>";
            else
            {
                $result = queryMysql("SELECT * FROM rieltors WHERE login='$user'");             
                    if ($result->num_rows)
                        $error = "Такой логин уже существует<br><br>";                   
                    else
                    {
                        queryMysql("INSERT INTO rieltors(login) VALUES('$user')");
                        die("<h4>Account created</h4>Please Log in.<br><br>");
                    }                   
            }           
        }

Буду очень признателен

@Sombrero · 26.02.2016, 16:07

Novichek_9I, Самый простой способ: cсоздаешь событие на js по нажатию клавишы в поле ввода и отправляешь текст поиска на сервер. Вот пример на jquery

PHP/HTML
1
2
3
4
5
<form method='post' action='signup.php'>$error
            <span>Login</span>
                <input type="text" name="user" id="search-input" placeholder="Введите логин">
                <span id="user_failed"></span>
<input type="submit" value="Отправить">

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('#search-input').keypress(function(){
            var that = this;
            $.ajax({
                   type: 'POST',
                   data: {
                        user: $(that).val(),
                    },
                   dataType: 'html',
                   url: 'signup.php',
                   success: function(data){
                        alert('Ответ от сервера пришел, делаем с пришедшими данными что хотим');
                   },
                   error: function(){
                            console.log('error')
                   }
              })                    
                
})

На серверной части уже работаешь так же как и с обычной отправкой формы

@Novichek_9I · 01.03.2016, 09:35 **[ТС]**

Sombrero, теперь не могу сравнить данные, пришедшие с сервера, с логином, введенным в поле. Что прописать в function(data) ?

@Sombrero · 01.03.2016, 09:56

Novichek_9I, Сравнивать надо на сервере с помощью php а не на клиенте)
Тем более у тебя уже все сделано

PHP
1
2
3
4
5
6
7
8
$result = queryMysql("SELECT * FROM rieltors WHERE login='$user'");             
                    if ($result->num_rows)
                        $error = "Такой логин уже существует<br><br>";                  
                    else
                    {
                        queryMysql("INSERT INTO rieltors(login) VALUES('$user')");
                        die("<h4>Account created</h4>Please Log in.<br><br>");
                    }

Теперь только остается отправить ответ клиенту, а там уже с помощью js в function(data) можно сделать что угодно (вывести ошибку в браузер например)

PHP
1
2
3
4
5
6
7
8
9
10
$result = queryMysql("SELECT * FROM rieltors WHERE login='$user'");             
                    if ($result->num_rows)
                        $error = "Такой логин уже существует<br><br>"; 
                         echo json_decode(['status' => 'errorLogin']);                 
                    else
                    {
                        queryMysql("INSERT INTO rieltors(login) VALUES('$user')");
                        echo json_decode(['status' => 'completeLogin']);
                        die("<h4>Account created</h4>Please Log in.<br><br>");
                    }

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$.ajax({
                   type: 'POST',
                   data: {
                        user: $(that).val(),
                    },
                   dataType: 'json',
                   url: 'signup.php',
                   success: function(data){
                        if (data.status == 'errorLogin'){
                           $('#user_failed').html('Тут текст ошибки');
                        }
 
                       if (data.status == 'completeLogin'){
                           $('#user_failed').html('Авторизация прошла успешно');
                        }
                   },
                   error: function(){
                            console.log('error')
                   }
              })

@Novichek_9I · 01.03.2016, 10:59 **[ТС]**

Sombrero, в echo json_decode(['status' => 'errorLogin']); на скобочки ругается "Parse error: syntax error, unexpected '[', expecting ')'"

@WhiteMind · 01.03.2016, 11:01

PHP
1
2
3
4
5
6
7
8
9
10
$result = queryMysql("SELECT * FROM rieltors WHERE login='$user'");             
                    if ($result->num_rows)
                        $error = "Такой логин уже существует<br><br>"; 
                         echo json_decode(['status' => 'errorLogin']);                 
                    else
                    {
                        queryMysql("INSERT INTO rieltors(login) VALUES('$user')");
                        echo json_decode(Array('status' => 'completeLogin'));
                        die("<h4>Account created</h4>Please Log in.<br><br>");
                    }

@Sombrero · 01.03.2016, 11:07

Novichek_9I, Это сокращенный способ объявления массива, начиная с версии PHP 5.4. Значит у вас версия ниже, поэтому квадратные скобки поменяйте на array()

PHP
1
echo json_decode(array('status' => 'errorLogin'));

@Novichek_9I · 01.03.2016, 11:08 **[ТС]**

я прописывал array, но не работает при этом, не проверяется поле "на лету"

@Sombrero · 01.03.2016, 11:15

Novichek_9I, Надо смотреть правильно ли выполняются условия на сервере, а потом уже смотреть через браузер приходит ли ответ, либо выводить в консоль ответ сервера и смотреть, что он нам прислал

@Novichek_9I · 01.03.2016, 11:29 **[ТС]**

Sombrero, в консоли пишет "error". Когда был dataType: 'html', тогда ответ приходил

@Sombrero · 01.03.2016, 12:05

Novichek_9I, поменяй

PHP
1
json_decode()

на

PHP
1
json_encode()

@Novichek_9I · 01.03.2016, 15:31 **[ТС]**

не работает

@Sombrero · 02.03.2016, 10:01

Novichek_9I, все так же выводит в консоли error? или что?

@Novichek_9I · 02.03.2016, 14:28 **[ТС]**

Sombrero, ну да. У меня в ajax написано:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
success: function(data){
                        if (data.status == 'errorLogin'){
                           $('#user_failed').html('Тут текст ошибки');
                        }
 
                       if (data.status == 'completeLogin'){
                           $('#user_failed').html('Авторизация прошла успешно');
                        }
                   },
                   error: function(){
                            console.log('Здесь ошибка')
                   }

Вот в консоли написано "Здесь ошибка"

Я так понимаю, запрос не приходит?

@Sombrero · 02.03.2016, 16:56

Novichek_9I, кажется догадываюсь в чет трабла. У вас стоит условие

PHP
1
2
if ($user == "")
                $error = "Введите данные во все поля<br><br>";

В живом поиске это условие не нужно. И надо убрать die(), либо не передавать значение в него

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 if (isset($_POST['user']))
        {
            $user = ($_POST['user']);
           
                $result = queryMysql("SELECT * FROM rieltors WHERE login='$user'");             
                    if ($result->num_rows)
                        $error = "Такой логин уже существует<br><br>"; 
                         echo json_encode(array('status' => 'errorLogin'));                 
                    else
                    {
                        queryMysql("INSERT INTO rieltors (login) VALUES ('$user')");
                        echo json_encode(array('status' => 'completeLogin'));
                        //die();
                    }                       
        }

@Novichek_9I · 13.03.2016, 17:13 **[ТС]**

Разобрался. Если кому-то будет полезно, вот рабочий код:

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
34
35
36
37
38
<?php
 
    require_once 'header.php';
 
    $error = $user ="";
 
    if (isset($_SESSION['user'])) destroySession();
 
    //Валидация формы регистрации
    if (isset($_POST['user']))
        {
            $user =($_POST['user']);
            
            if ($user == "")
                $error = "Введите данные во все поля";
            else
            {
                $result = queryMysql("SELECT * FROM table WHERE login='$user'");
                    if ($result->num_rows)
                        {
                            $error = "Логин занят";                           
                        }
                    else
                    {
                        queryMysql("INSERT INTO table(login) VALUES('$user')");                     
                        die("<h4>Account created</h4>Please Log in.<br><br>");
                    }                   
            }           
        }
 
    echo <<<_END
        <form method='post' action='signup.php'>$error
            <span>Login</span>
                <input type="text" name="user" placeholder="Введите логин">
                <span id="user_failed"></span>          
            <input type="submit" value="Отправить">
_END;
?>

Файл javascript:

JavaScript
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
$(document).ready(function(){
  $("[name='user']").change(function(){
      params = "user=" + $("[name='user']").val();
                request = new ajaxRequest()
                request.open("POST", "checkuser.php", true)
                request.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
                request.setRequestHeader("Content-length", params.length)
                request.setRequestHeader("Connection", "close")
                request.onreadystatechange = function()
                    {
                        if (this.readyState == 4)
                            if (this.status == 200)
                                if (this.responseText != null)
                                    $('#user_failed').html(this.responseText)
                    }
                request.send(params)
      })
 function ajaxRequest()
                    {
                        try {var request = new XMLHttpRequest()}
                        catch(e1){
                        try {request = new ActiveXObject("Msxml2.XMLHTTP")}
                        catch(e2){
                        try {request = new ActiveXObject("Microsoft.XMLHTTP")}
                        catch(e3){
                        request = false
                        } } }
                        return request
                    }
})

Файл checkuser.php:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
<?php
require_once 'functions.php';
 
if (isset($_POST['user']))
{
    $user = ($_POST['user']);   
    $result = queryMysql("SELECT * FROM table WHERE login='$user'");
    if ($result->num_rows)
        echo "<span>Логин занят</span>";
    else echo "Ок";
}
?>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

@Novichek_9I 4 / 5 / 4 Регистрация: 31.03.2015 Сообщений: 145
	01.03.2016, 09:35 [ТС]
	Sombrero, теперь не могу сравнить данные, пришедшие с сервера, с логином, введенным в поле. Что прописать в function(data) ? 0

@Novichek_9I 4 / 5 / 4 Регистрация: 31.03.2015 Сообщений: 145
	01.03.2016, 10:59 [ТС]
	Sombrero, в echo json_decode(['status' => 'errorLogin']); на скобочки ругается "Parse error: syntax error, unexpected '[', expecting ')'" 0

@Novichek_9I 4 / 5 / 4 Регистрация: 31.03.2015 Сообщений: 145
	01.03.2016, 11:08 [ТС]
	я прописывал array, но не работает при этом, не проверяется поле "на лету" 0

@Sombrero 74 / 70 / 40 Регистрация: 31.03.2014 Сообщений: 298
	01.03.2016, 11:15
	Novichek_9I, Надо смотреть правильно ли выполняются условия на сервере, а потом уже смотреть через браузер приходит ли ответ, либо выводить в консоль ответ сервера и смотреть, что он нам прислал 0

@Novichek_9I 4 / 5 / 4 Регистрация: 31.03.2015 Сообщений: 145
	01.03.2016, 11:29 [ТС]
	Sombrero, в консоли пишет "error". Когда был dataType: 'html', тогда ответ приходил 0

@Novichek_9I 4 / 5 / 4 Регистрация: 31.03.2015 Сообщений: 145
	01.03.2016, 15:31 [ТС]
	не работает 0

@Sombrero 74 / 70 / 40 Регистрация: 31.03.2014 Сообщений: 298
	02.03.2016, 10:01
	Novichek_9I, все так же выводит в консоли error? или что? 0