Comprobar si el nombre de usuario existe con jQuery y PHP

Fecha Publicación:       12 de Febrero de 2020
Fecha Modificación:       03 de Noviembre de 2023

Para comprobar durante el proceso de registro si el nombre de usuario está disponible, todo esto sin recargar la página, podemos utilizar el siguiente código:

Primero vamos con el código del archivo que contiene el Formulario padre:

Html:

<input  name="nick" type="text" required id="nick" size="15" maxlength="15"/>
<div id="Info"></div>   

Script:


<script src="/include/js/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function() {    
    $('#nick').blur(function(){
		 var username = $(this).val(); 		  
		if( username !="" ){ /*Inicio si 2*/
		/*$('#submitbutton').attr('disabled', 'disabled');	*/			
        $('#Info').html('<img src="/webadmin/mantenimiento/GestorUsuarios/loader.gif" alt="" />').fadeOut(1000);       
		//alert(username);	     
        var dataString = 'nick='+username;
			$.ajax({
				type: "POST",
				url: "/webadmin/mantenimiento/GestorUsuarios/_compueba-usuario-existe.php",
				data: dataString,
				success: function(data) {
					$('#Info').fadeIn(1000).html(data);				
					
				}
			});	/* fin ajax*/		
		}/*--fin si 2*/
    });              
});    
</script>

 

Por último vamos con el código del archivo PHP que comprueba si el usuario existe:

_compueba-usuario-existe.php:

Definiendo Estilos:

<style type="text/css">
#Error{
	background-image:url(/webadmin/mantenimiento/GestorUsuarios/no.jpg);
	background-repeat:no-repeat;
	background-position:left; 
	color:#FF0000; 
	padding-left:33px; 
	height:19px; 
	padding-top:6px;
	padding-right:10px;
	/*float: left;	*/	
	margin-left: 8px;
}
#Success{
	background-image: url(/webadmin/mantenimiento/GestorUsuarios/yes.jpg);
	background-repeat: no-repeat;
	background-position: left;
	color: #669933;
	padding-left: 33px;
	height: 19px;
	padding-top: 6px;
	padding-right: 10px;
	/*float: left;	*/
	margin-left: 8px;
}
</style>
<?php
sleep(1);
include $_SERVER['DOCUMENT_ROOT']."/_config.php";	       
if($_REQUEST) {
    $username = $_REQUEST['nick'];
    $query = "select * from _usuarios where LOWER(nick) = '".strtolower($username)."'";
    $results = db_query( $query) or die('ok');

    if(db_num_rows(@$results) > 0) {
        echo '<div id="Error">Usuario ya existente</div>';
		echo "<script>
		document.getElementById('nick').value='',
		document.getElementById('nick').focus()</script>";	
    }else{
        echo '<div id="Success">Disponible</div>';
	}	
}
?>

 

Articulo : 1341 - Veces Leidas
Compartir Articulo: