Есть несколько готовых библиотек, которые позволяют без перезагрузки страницы проверять уникальность вводимых данных без перезагрузки страницы по технологии AJAX (в статье речь не о них, но о простом «велосипеде» на jQuery). Это в подавляющих случаях используется в формах регистрации на сайтах. Наример, постановка задачи: необходимо ввести Ник (ФИО) и E-mail и автоматически в фоне проверить, есть ли такой же Ник и такой же электронный почтовый адрес уже в базе зарегистрированных пользователей.



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

<form name="reg" method="post" action="action/action.registration.php" onSubmit="return checkedFormReg(this)">
    <input name="releFio" type="hidden">
    <input name="releEmail" type="hidden">
    <table width="100%" border="0" cellspacing="0" cellpadding="5" style="font-weight: bold;">
    <tr>
        <td width="40%" align="right">Представьтесь, пожалуйста</td>
        <td>
            <input maxlength="32" name="fio" type="text" style="width:200px;" onchange="responseFio();">
            <span id="responseFioSpan" style="margin-left: 10px;"></span>
        </td>
    </tr>
    <tr>
        <td width="40%" align="right">E-mail</td>
        <td>
            <input maxlength="64" name="email" type="text" style="width:200px;" onchange="responseEmail();">
            <span id="responseEmailSpan" style="margin-left: 10px;"></span>
        </td>
    </tr>
    <tr>
        <td width="40%" align="right"><input type="reset" value="Очистить" onclick="resetRegForm();"></td>
        <td><input type="submit" value="Регистрация" id="buttonSub"></td>
    </tr>
    </table>
</form>

Обратите внимание на:

<span id="responseFioSpan" style="margin-left: 10px;"></span>

и

<span id="responseEmailSpan" style="margin-left: 10px;"></span>

В этих «спанах» мы будем выводить уведомления.

Далее приведём две функции на JavaScript, которые будут проверять уникальность вводимых данных используя конструкцию $.ajax от jQuery:

function responseFio(){
        $.ajax({
            type: "POST",
            url: "/action/ajax.response.registration.php",
            data: { action: 'fio', user: document.reg.fio.value },
            cache: false,
            success: function(response){
                if(response == 'on'){
                    $("#responseFioSpan").text("Имя занято").css("color","red");
                    document.reg.releFio.value = 'off';
                }else{
                    $("#responseFioSpan").text("Имя свободно").css("color","green");
                    document.reg.releFio.value = 'on';
                };
            }
        });
    };
    
    function responseEmail(){
        $.ajax({
            type: "POST",
            url: "/action/ajax.response.registration.php",
            data: { action: 'email', email: document.reg.email.value },
            cache: false,
            success: function(response){
                if(response == 'on'){
                    $("#responseEmailSpan").text("E-mail занят").css("color","red");
                    document.reg.releEmail.value = 'off';
                }else{
                    $("#responseEmailSpan").text("E-mail свободен").css("color","green");
                    document.reg.releEmail.value = 'on';
                };
            }
        });
    };

В этих функциях идёт обращение к файлу /action/ajax.response.registration.php, который как раз и делает проверку запросом в базу данных:

# configuration charset
ini_set(default_charset,"UTF-8");

global $_POST;
       
# include data base
require "../../mysql.inc.php";

switch ($_POST['action']){
    
	case "fio":
        $row = $DB->selectRow('SELECT * FROM ?_tbl_user WHERE binary(user)=? LIMIT ?d', trim($_POST['fio']), 1);
        if($row){ echo "on"; }else{ echo "off"; };
        break;
        
    case "email":
        $row = $DB->selectRow('SELECT * FROM ?_tbl_user WHERE binary(user_email)=? LIMIT ?d', trim($_POST['email']), 1);
        if($row){ echo "on"; }else{ echo "off"; };
        break;
        
};

В зависимости от ответов меняются значения наших переключателей

<input name="releFio" type="hidden">
    <input name="releEmail" type="hidden">

и меняются уведомления.

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

function checkedFormReg(form){
        if(document.reg.fio.value.length < 3){
            alert("Представьтесь, пожалуйста (не менее 3-х символов)!");
            document.reg.fio.focus();
            return false;
        }else{
            responseFio();
        };
        if(document.reg.email.value.length < 6){
            alert("В E-mail должно быть не менее 6 (шести) символов!");
            document.reg.email.focus();
            return false;
        }else{
            responseEmail();
        };
        //
        if(document.reg.releFio.value == 'off' || document.reg.releEmail.value == 'off'){
            alert('Введите уникальные данные!');
            return false;
        }else{
            return true;
        };
    };

И функцию для reset:

function resetRegForm(){
        $("#responseFioSpan").text("");
        $("#responseEmailSpan").text("");
    };

Вуаля!

Теперь необходимо сказать несколько слов в защиту события onchange, по которому происходит проверка (вызов функций responseFio() и responseEmail()). Дело в том, что используемое событие срабатывает не во время ввода данных, что было бы очень напряжно для сервера, но непосредственно при смене фокуса! Вот такой нюанс.