Как в реальном времени валидировать вводимые данные в чекбокс и сравнивать с реальными?

Question

[veme312]

Привет. У меня есть сайт. На этом сайте сейчас я делаю личный кабинет совмещенный с игровым сервером.
Я хочу сделать регистрацию профиля на сайте по нику.

Как идея: Сделать поле ввода ника > отправка юзера вместе с post запросом > проверка занятости ника и если ник есть в базе то отправить на страницу с сообщением о занятости ника. А если нет ника в базе, то отправлять на страницу регистрации.

однако, я вдохновлен xbox. Где при вводе ника, сразу показывает его занятость. как это можно реализовать не отправляя юзера по 101 странице?

Ники храню в базе данных

Answer 1

[irishmann]

frontend

<div>
    <label for="nickname">Ник:</label>
    <input type="text" placeholder="Введите ник..." id="nickname" name="nickname">
    <div id="msg"></div>
</div>
<script type=""text/JavaScript">
    var nickname = document.querySelector('#nickname');
    var msg = document.querySelector('#msg');

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var result = JSON.parse(this.responseText);
        //status == false  ник занят
        //status == true   ник свободен
        if(result['status'] === false){
          msg.innerHTML = '&#10060; Этот ник занят!';
        } else {
          msg.innerHTML = '&#9989; Ник свободен';
        }
      }
    };

    nickname.addEventListener("blur", function(){
        msg.innerHTML = '';
        let data = new FormData();
        data.append('nick', nickname.value);
        xhttp.open("POST", "ajax.php", true);
        xhttp.send(data);
    });
</script>

backend

<?php
    // Получаем $_POST['nick']
    // СОздаем запрос в бд типа 
    // SELECT id FROM users WHERE nick LIKE 's'
    // читаем про подготовленные запросы
    // Далее если id есть status = false иначе true
    //status == false  ник занят
    //status == true   ник свободен
    // заворачиваем в JSON
    

    // ТЕСТ без бд
    
    //массив занятых ников
    $nicks = ['admin', 'moderator', 'pushkin', 'tester', 'susanin', 'lev_tolstoi', 'administrator'];
    
    //если $_POST['nick'] есть в массиве занятых, то статус false, если нет, то true
    if (in_array(strtolower($_POST['nick']), $nicks)){
        $status = false;
    } else {
        $status = true;
    }
    //заворачиваем в JSON и выводим
    echo json_encode(['status' => $status]);

Comments

[veme312]

Огромное спасибо за чёткий код!

Куда можно денежку пожертвовать на твое благополучие?

[irishmann]

veme312, wmr: R238112772666

[veme312]

и тут нагрянул вопрос, у меня есть регулярные выражения. Однако, они работают в импуте на оправку. Не блокируя тем самым ввод. В связи с этим ник "аылпуыбмыу" проверяется. как избежать это и вывести что ник не соответствует регулярке?

[irishmann]

veme312, код предоставьте

[veme312]

<form action="/scripts/create.php" method="POST" data-toggle="validator" data-delay="200" autocomplete="off">
							<fieldset>
								<br />
								<p><b>Придумайте игровой ник:</b></p>
								<p><input type="text" id="username" name="username" maxlength="16" pattern="^[A-Za-z0-9_]{1,16}$" required title="Разрешены только английские буквы и цифры!" required value="Игровой ник" onBlur="if(this.value=='')this.value='Игровой ник'" onFocus="if(this.value=='Игровой ник')this.value='' "></p>
								<div id="msg"></div>
								<p><input type="submit" value="Далее"></p>
							</fieldset>
						</form>

[irishmann]

veme312,

Так

<form action="/scripts/create.php" method="POST" data-toggle="validator" data-delay="200" autocomplete="off">
  <fieldset>
    <br />
    <p><b>Придумайте игровой ник:</b></p>
    <p><input required type="text" id="username" name="username" maxlength="16" title="Разрешены только английские буквы и цифры!" placeholder="Игровой ник"></p>
    <div id="msg"></div>
    <p><input type="submit" id="submit_button" disabled value="Далее"></p>
  </fieldset>
</form>

<script type=""text/JavaScript">
    var username = document.querySelector('#username');
    var msg = document.querySelector('#msg');
    var submit_btn = document.querySelector('#submit_button');
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var result = JSON.parse(this.responseText);
        //status == false  ник занят
        //status == true   ник свободен
        if(result['status'] === false){
          msg.innerHTML = '&#10060; Ник занят!';
        } else {
          msg.innerHTML = '&#9989; Ник свободен';
          submit_btn.disabled = false;
        }
      }
    };

    username.addEventListener("blur", function(){
        msg.innerHTML = '';
        let nick = username.value;
        submit_btn.disabled = true;
        let regexp = /^[A-Za-z0-9_]{1,16}$/;
        if(regexp.test(nick)){
            let data = new FormData();
            data.append('nick', nick);
            xhttp.open("POST", "ajax.php", true);
            xhttp.send(data);
        } else {
            msg.innerHTML = '&#10060; Ник от 1 до 16 символов и должен содержать только английские буквы, цифры и знак подчеркивания!';
        }
    });
</script>

Очистил value, убрал onclick и onblur атрибуты у input, потому что бессмысленно так делать, когда есть placeholder. Регулярное выражение перенес в username.addEventListener("blur", function(){. Заблокировал кнопку отправки формы.
Алгоритм такой. Пользователь вводит ник. Проверяем на соответствие ника регулярному выражению, если не соответствует - выводим ошибку. Если ник соответствует регулярному выражению, запрашиваем через AJAX в бд, если такой ник существует, выводим ошибку. Если ник свободен, то выводим сообщение "Ник свободен" и разблокируем кнопку отправки формы.

[veme312]

irishmann, Спасибо, благодарю вас за бесценные знания!

[veme312]

irishmann, Странное происходит. проверка происходит. однако не отрабатывает так как должно. https://www.8mc.ru/account/register/

[irishmann]

veme312,
1. <style> в <body> - нехорошо
2. <script type=""text/JavaScript"> - 1 лишняя кавычка
3. дублируешь проверку, в первый раз она нормально отрабатывает проверка по регулярке, и тут же запускается вторая проверка, которая затирает результат 1 проверки.

1 проверка, сразу после формы в теге script

<script type=""text/JavaScript">
							var username = document.querySelector('#username');
							var msg = document.querySelector('#msg');
							var submit_btn = document.querySelector('#submit_button');
							var xhttp = new XMLHttpRequest();
							xhttp.onreadystatechange = function() {
							  if (this.readyState == 4 && this.status == 200) {
								var result = JSON.parse(this.responseText);
								//status == false  ник занят
								//status == true   ник свободен
								if(result['status'] === false){
								  msg.innerHTML = '&#10060; Ник занят!';
								} else {
								  msg.innerHTML = '&#9989; Ник свободен';
								  submit_btn.disabled = false;
								}
							  }
							};

							username.addEventListener("blur", function(){
								msg.innerHTML = '';
								let nick = username.value;
								submit_btn.disabled = true;
								let regexp = /^[A-Za-z0-9_]{1,16}$/;
								if(regexp.test(nick)){
									let data = new FormData();
									data.append('username', nick);
									xhttp.open("POST", "/scripts/check.php", true);
									xhttp.send(data);
								} else {
									msg.innerHTML = '&#10060; Ник от 1 до 16 символов и должен содержать только английские буквы, цифры и знак подчеркивания!';
								}
							});
						</script>

2 проверка в конце страницы

<script type=""text/JavaScript">
						var username = document.querySelector('#username');
						var msg = document.querySelector('#msg');

						var xhttp = new XMLHttpRequest();
						xhttp.onreadystatechange = function() {
						  if (this.readyState == 4 && this.status == 200) {
							var result = JSON.parse(this.responseText);
							if(result['status'] === false){
							  msg.innerHTML = '&#10060; Этот ник занят!';
							} else {
							  msg.innerHTML = '&#9989; Ник свободен';
							}
						  }
						};

						username.addEventListener("blur", function(){
							msg.innerHTML = '';
							let data = new FormData();
							data.append('username', username.value);
							xhttp.open("POST", "/scripts/check.php", true);
							xhttp.send(data);
						});
					</script>

[veme312]

irishmann, Увы, не заработало.

да и ошибок в консоли нет.

[irishmann]

veme312, Не вижу изменений на сайте.

[veme312]

irishmann,

[irishmann]

veme312,

все так же

[veme312]

irishmann, Кавычки нет. Код проверял. Даже подождать сброс кэша. суть не улавливаю

[veme312]

irishmann, Что скажите?

[irishmann]

veme312, Кавычки убрали, вижу. Так же вижу что код проверки дублируется.
view-source:https://www.8mc.ru/account/register/
255-288 строки - Первая проверка с регулярным выражением, то есть которая 100% работает
345-369 строки - Вторая проверка, которая плюет на первую проверку и пропускает ники с кириллицей

Ищите причины дублирования.

исходник на jsfiddle

[veme312]

irishmann, Спасибо. Совместными усилиями вместе с вами я добился вот чего:

https://www.8mc.ru/test/

искренне благодарен вам. и буду благодарен критике проделанного)

[veme312]

irishmann, Такова есть?

Answer 2

[Владислав]

Используй AJAX. На поле Input вешай, к примеру, обработчик blur, который будет срабатывать каждый раз когда input теряет фокус и отправляй запрос к базе на проверку.