Compruebe si el usuario ya existe sin enviar el formulario

Al registrar usuarios en una tabla de base de datos, debe asegurarse de que la dirección de correo electrónico o el nombre de usuario de cada usuario sea único. En un tutorial anterior, hicimos esto usando PHP simple donde el usuario envía el formulario y se realiza esta verificación.

En este tutorial, lo haremos de una manera más eficiente y divertida (usando JQuery y Ajax) sin enviar el formulario o recargar la página.

El usuario visita la página de registro, ingresa su nombre de usuario, correo electrónico y contraseña. Cuando el cursor abandona el campo de nombre de usuario (un evento al que se hace referencia en JavaScript como en la falta de definición, se realiza una verificación de nombre de usuario en segundo plano a través de una llamada ajax al servidor sin que el usuario ni siquiera haga clic en el botón enviar. Si un usuario con el nombre de usuario proporcionado ya existe en la base de datos, se muestra de inmediato un mensaje de validación con el estilo apropiado.

Hagámoslo:

tabla de usuarios
Campos Escribe
identificación INT (11)
nombre de usuario VARCHAR (255)
Email VARCHAR (255)
contraseña VARCHAR (255)

Para la parte restante de este tutorial, hagámoslo por pasos;

Paso 1:

Crea un archivo con nombre register.php y pega este código en él:

<?php include('process.php'); ?>
<html>
<head>
  <title>Register</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
 <form id="register_form">
      <h1>Register</h1>
      <div id="error_msg"></div>
	  <div>
	 	<input type="text" name="username" placeholder="Username" id="username" >
	    <span></span>
	  </div>
	  <div>
	    <input type="email" name="email" placeholder="Email" id="email">
		<span></span>
	  </div>
	  <div>
	   <input type="password" name="password" placeholder="Password" id="password">
	  </div>
	  <div>
	 	<button type="button" name="register" id="reg_btn">Register</button>
	  </div>
	</form>
</body>
</html>
<!-- scripts -->
<script src="jquery-3.2.1.min.js"></script>
<script src="script.js"></script>

Paso 2:

Incluye el styles.css filete:

styles.css:

body {
  background: #A9D9C3;
}
#register_form h1 {
  text-align: center;
}
#register_form {
  width: 37%;
  margin: 100px auto;
  padding-bottom: 30px;
  border: 1px solid #918274;
  border-radius: 5px;
  background: white;
}
#register_form input {
  width: 80%;
  height: 35px;
  margin: 5px 10%;
  font-size: 1.1em;
  padding: 4px;
  font-size: .9em;
}
#reg_btn {
  height: 35px;
  width: 80%;
  margin: 5px 10%;
  color: white;
  background: #3B5998;
  border: none;
  border-radius: 5px;
}
/*Styling for errors on form*/
.form_error span {
  width: 80%;
  height: 35px;
  margin: 3px 10%;
  font-size: 1.1em;
  color: #D83D5A;
}
.form_error input {
  border: 1px solid #D83D5A;
}

/*Styling in case no errors on form*/
.form_success span {
  width: 80%;
  height: 35px;
  margin: 3px 10%;
  font-size: 1.1em;
  color: green;
}
.form_success input {
  border: 1px solid green;
}
#error_msg {
  color: red;
  text-align: center;
  margin: 10px auto;
}

En register.php, las dos últimas líneas especifican los archivos javascript que se utilizan en esta aplicación. Primero está JQuery, que puede descargar desde aquí, y también está el script.js archivo donde escribiremos nuestro propio código JavaScript. Coloque el archivo jquery en el directorio raíz de su aplicación y cámbiele el nombre a jquery-3.2.1.min.js.

Ahora hagamos que el sitio sea dinámico tanto en el front-end como en el backend.

Paso 3:

Crear un script.js archivar y pegar este código en él:

$('document').ready(function(){
 var username_state = false;
 var email_state = false;
 $('#username').on('blur', function(){
  var username = $('#username').val();
  if (username == '') {
  	username_state = false;
  	return;
  }
  $.ajax({
    url: 'register.php',
    type: 'post',
    data: {
    	'username_check' : 1,
    	'username' : username,
    },
    success: function(response){
      if (response == 'taken' ) {
      	username_state = false;
      	$('#username').parent().removeClass();
      	$('#username').parent().addClass("form_error");
      	$('#username').siblings("span").text('Sorry... Username already taken');
      }else if (response == 'not_taken') {
      	username_state = true;
      	$('#username').parent().removeClass();
      	$('#username').parent().addClass("form_success");
      	$('#username').siblings("span").text('Username available');
      }
    }
  });
 });		
  $('#email').on('blur', function(){
 	var email = $('#email').val();
 	if (email == '') {
 		email_state = false;
 		return;
 	}
 	$.ajax({
      url: 'register.php',
      type: 'post',
      data: {
      	'email_check' : 1,
      	'email' : email,
      },
      success: function(response){
      	if (response == 'taken' ) {
          email_state = false;
          $('#email').parent().removeClass();
          $('#email').parent().addClass("form_error");
          $('#email').siblings("span").text('Sorry... Email already taken');
      	}else if (response == 'not_taken') {
      	  email_state = true;
      	  $('#email').parent().removeClass();
      	  $('#email').parent().addClass("form_success");
      	  $('#email').siblings("span").text('Email available');
      	}
      }
 	});
 });

 $('#reg_btn').on('click', function(){
 	var username = $('#username').val();
 	var email = $('#email').val();
 	var password = $('#password').val();
 	if (username_state == false || email_state == false) {
	  $('#error_msg').text('Fix the errors in the form first');
	}else{
      // proceed with form submission
      $.ajax({
      	url: 'register.php',
      	type: 'post',
      	data: {
      		'save' : 1,
      		'email' : email,
      		'username' : username,
      		'password' : password,
      	},
      	success: function(response){
      		alert('user saved');
      		$('#username').val('');
      		$('#email').val('');
      		$('#password').val('');
      	}
      });
 	}
 });
});

El primer fragmento de código es la parte que se ejecuta cuando el cursor abandona el campo de nombre de usuario del formulario de entrada. El segundo fragmento se ejecuta cuando el cursor abandona el campo de correo electrónico y la última parte del código se asegura de que no haya ningún error en el formulario y luego envía los datos al servidor cuando se hace clic en el botón de registro.

Etapa 4:

Esta es la última parte del código. Una vez que los datos se han enviado al servidor, el código php recibe la información y realiza las comprobaciones necesarias.

process.php:

<?php 
  $db = mysqli_connect('localhost', 'root', '', 'taken');
  if (isset($_POST['username_check'])) {
  	$username = $_POST['username'];
  	$sql = "SELECT * FROM users WHERE username='$username'";
  	$results = mysqli_query($db, $sql);
  	if (mysqli_num_rows($results) > 0) {
  	  echo "taken";	
  	}else{
  	  echo 'not_taken';
  	}
  	exit();
  }
  if (isset($_POST['email_check'])) {
  	$email = $_POST['email'];
  	$sql = "SELECT * FROM users WHERE email='$email'";
  	$results = mysqli_query($db, $sql);
  	if (mysqli_num_rows($results) > 0) {
  	  echo "taken";	
  	}else{
  	  echo 'not_taken';
  	}
  	exit();
  }
  if (isset($_POST['save'])) {
  	$username = $_POST['username'];
  	$email = $_POST['email'];
  	$password = $_POST['password'];
  	$sql = "SELECT * FROM users WHERE username='$username'";
  	$results = mysqli_query($db, $sql);
  	if (mysqli_num_rows($results) > 0) {
  	  echo "exists";	
  	  exit();
  	}else{
  	  $query = "INSERT INTO users (username, email, password) 
  	       	VALUES ('$username', '$email', '".md5($password)."')";
  	  $results = mysqli_query($db, $query);
  	  echo 'Saved!';
  	  exit();
  	}
  }

?>

Y eso nos lleva al final de este tutorial.

Espero que te haya resultado útil.

Deja un comentario