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:

  1. Primero vamos con el código del archivo que contiene el formulario de registro:

jQuery

$(document).ready(function(){
		 		
	var consulta;
		
	//hacemos focus
	$("#usuario").focus();
								
	//comprobamos si se pulsa una tecla
	$("#usuario").keyup(function(e){
		 //obtenemos el texto introducido en el campo
		 consulta = $("#usuario").val();
						 
		 //hace la búsqueda
		 $("#resultado").delay(1000).queue(function(n) { 	
							
			$("#resultado").html('<img src="ajax-loader.gif" />');
							
				$.ajax({
					type: "POST",
					url: "comprobar.php",
					data: "b="+consulta,
					dataType: "html",
					error: function(){
						alert("error petición ajax");
					},
					success: function(data){ 									
						$("#resultado").html(data);
						n();
					}
			});
							
		 });
					 
	});
				 
});

HTML

<input type="text" id="usuario" />         
<div id="resultado"></div>

  1. Por último vamos con el código del archivo PHP que comprueba si el usuario existe:
<?php
	$user = $_POST['b'];
	
	if(!empty($user)) {
		comprobar($user);
	}
	
	function comprobar($b) {
		$con = mysql_connect('localhost','root', 'root');
		mysql_select_db('masajes', $con);
	
		$sql = mysql_query("SELECT * FROM usuarios WHERE nombre = '".$b."'",$con);
		
		$contar = mysql_num_rows($sql);
		
		if($contar == 0){
			echo "<span style='font-weight:bold;color:green;'>Disponible.</span>";
		}else{
			echo "<span style='font-weight:bold;color:red;'>El nombre de usuario ya existe.</span>";
		}
	}	
?>

Podéis descargar imágenes de carga para Ajax usando de este generador online:

http://www.ajaxload.info/

Sobre Reacción Estudio

Somos un estudio informático formado por jóvenes centrados en el desarrollo web, el diseño gráfico y la fotografía. Puedes solicitar presupuesto para tu proyecto a través de nuestra página web o por teléfono, pero en este blog hablaremos de todo lo que engloba el desarrollo web a día de hoy.


  • Dago

    Hola, espero me puedan ayudar lo que quiero es hacer saber como hacer cualquier llamada a una función de php desde jquery, entonces quiero poner lo de jquery en una función y no como repuesta a un evento. LO QUE ME CONFUNDE ES LA PARTE DE DELAY Y QUEUE sobretodo la n

    • Alberto

      Veamos, el método DELAY lo que hace es una pausa de 1 segundo, QUEUE crea una cola para la función AJAX y la variable N es el valor que le pasas a QUEUE.

  • Javier Barrios

    Hola de antemano muchas gracias … me funciona todo correctamente solamente que cuando el explorador me da opciones de correos y los pega en el campo no hace la validacion y dice disponible existe algun metodo que force esa validacion? saludes

    • Alberto

      ¿A qué te refieres con que el explorador te da opciones de correos?. ¿Y a qué validación te refieres exactamente?.

      Un saludo.

      • Javier Barrios

        Por ejemplo yo uso mi correo de hotmail para todas las paginas web entonces cuando mi explorador mira que hay un campo de correo en una pagina o estoy escribiendo la iniciales el inmediatamente me da opcion de solo darle enter o doble click para no escribir todo el correo y lo pega en el campo , si hago eso ya se que el correo o usuario ya exista no valida y lo deja pasar.En el caso que escribiera todo el correo o el usuario si valida

        • Alberto

          Claro, pero eso pasa porque el script que hay en el ejemplo, utiliza el evento de jQuery para cuando se pulsa alguna tecla en el campo indicado, por eso si no escribes, no lo comprueba.

          En vez de usar el evento “keyup”, podrías hacer una función para validar el nombre de usuario y luego validar todo el formulario y al llegar a el campo email, llamar a esta función.

          • Javier Barrios

            Bueno no soy muy sabio en estas cosas pero igual muchas gracias !! ya vere como hacer la funcion despuesito por lo pronto ya esta funcionando :D

  • Chris Medina

    Muchas gracias, me sirvió mucho el tutorial, solamente que he batallado para que cuando el usuario o contraseña no son válidos me regrese el data en el div del html, solo me regresa cuando los datos que envío no son válidos, por ejemplo que no ingresé un valor.

    No se si me puedas ayudar con eso porque ya tengo dias batallando con eso y no ha quedado :/

  • Chris Medina

    Cuando doy clic en el boton de login o submit me manda a llamar la función cargar:

    function cargar() {

    var textousr = document.getElementById(“usuario”).value
    var textopass = document.getElementById(“contrasena”).value
    var url=”script_acceso_usuario.php”

    $(‘#resultado’).delay(10).queue(function(n) {

    $(‘#resultado’).html(”);

    $.ajax({

    type: “POST”,
    url:url,
    data:{ ‘usuario’: textousr, ‘contrasena’: textopass },
    dataType: “html”,
    success: function(datos) {
    $(‘#resultado’).html(datos);

    n();
    }

    });

    });

    }

  • Diego González

    amigo, me funcionó perfectamente, pero me gustaria saber como limpiar el campo cuando el resultado es “no disponible”.

    Muchas gracias, agradezco tu ayuda

    • Alberto

      En el php cambia el mensaje que devuelve al Ajax, en esta parte:

      
      if($contar == 0){
             echo 1; //disponible
      
      }else{
             echo 0; //no disponible
       }

      En el success del Ajax sería algo así:

      
      success: function(data){                                                      
              $("#resultado").html(data);
              n();
              if(data == "0"){
                     $("#id_del_campo_del_formulario").value("");
              }
      
      }
      

      Un saludo!

      • Diego González

        lo implementé y funcionó, muchas gracias.

      • sergio esparza

        yo el ejemplo lo tengo asi:

        function checkAvailability() {
        $(“#loaderIcon”).show();
        jQuery.ajax({
        url: “action/check_availability.php”,
        data:’username=’+$(“#user”).val(),
        type: “POST”,
        success:function(data){
        $(“#user-availability-status”).html(data);
        $(“#loaderIcon”).hide();
        if(data ==”0″){
        $(“#user”).value(“”);
        }

        },
        error:function (){}
        });
        }

        Pero no logro resetear el input #user, ayuuuda!!!…donde tendria que colocarlo…saludos!!!

        • sergio esparza

          Despues de darle vueltas resolvi que hay conflicto en los tipos de numero y string de ajax por lo que aplique un arreglo en el php y enviarlo por json, a continuacion lo muestro:

          pagina html:

          function checkAvailability() {
          $("#loaderIcon").show();
          jQuery.ajax({
          url: "action/check_availability.php",
          data:'username='+$("#user").val(),
          type: "POST",
          success:function(data){
          var datos = JSON.parse(data);
          $("#user-availability-status").html(datos[1]);
          $("#loaderIcon").hide();

          if(datos[0] == 0){

          $("#user").val(" ");
          }

          },
          error:function (){}

          });
          }

          y en el php:

          require_once("../Connections/dbcontroller.php");
          $db_handle = new DBController();

          if(!empty($_POST["username"])) {
          $result = mysql_query("SELECT count(*) FROM dat_trhow WHERE user1='" . $_POST["username"] . "'");
          $row = mysql_fetch_row($result);
          $user_count = $row[0];
          if($user_count>0) {
          //echo " Usuario no disponible.";
          //echo 0;
          $numero=0;
          $datos = array ($numero," Usuario no disponible.");
          echo json_encode($datos);
          }else{
          // echo " Usuario disponible.";
          //echo 1;
          $numero_2 = 1;
          $datos = array($numero_2," Usuario disponible.");
          echo json_encode($datos);
          }
          }

          y si funciona sin problemas, saludos!!!

  • Antonio Misael

    hola oyes una pregunta como guardo el jquery es que soy nuevo

  • Matias Sosa

    Master me funciono de 10 el codigo lo que si no me anda es que si tengo un usuario ocupado y quiero poner enviar de todas formas el formulario me lo envia igual y esta mal porque deberia devolver un return para no dejar enviar la informacion, si me ayudan se los voy a agradecer!

    • Alberto

      Pues en la función “comprobar()”, en vez de imprimir el mensaje, imprime el resultado, por ejemplo, “0″ si existe y “1″ si no existe, y luego con jQuery imprimes el mensaje en caso de que sea “1″ y cancelas el envio del formulario si es “0″.

      • Matias Sosa

        estoy usando jquery validate para validar unos campos y hasta el momento todo bien, tambien implemente el codigo para verificar el nombre de usuario existente en la base de datos y anda bien, el unico problema es que si el usuario existe el formulacio se ejecuta igual y no deberia me falta poner una condicion para devolver un RETURN o algo asi…. adjunto el script.

        PD: son 2 script diferentes aplicado al mismo formulario, se pueden unir los codigos logrando toda la validacion?

        function verificar(){
        $.ajax({type: “GET”,url:”vef.php”,data:”nick=”+$(“#nick”).val(),success:function(msg){
        $(“#final”).html(msg);

        }})
        }

        $(document).ready(function() {
        $(“#ok”).hide();

        var usuarioValido;
        $.validator.addMethod(“regex”,function(value,element,regexp){
        var re= new RegExp(regexp);
        return this.optional(element) || re.test(value);
        },”Solo caracteres alfanumericos”);

        $(“#formulario”).validate({
        rules: {
        clave1: { required: true, minlength: 6 },
        clave2: { required: true, minlength: 6, equalTo: “#clave1″},
        nick: { required: true, minlength: 6, regex:”^[a-zA-Z0-9_]+$” },
        nombre: { required: true, minlength: 2},
        email: { required:true, email: true},

        agree: {required: true}
        },

        messages: {
        clave1: { required: “Por favor, introduzca su password”, minlength: “Su clave debe tener mas de 6 caracteres” },

        clave2: { required: “Por favor, introduzca de nuevo su password”, minlength: “Su clave debe tener mas de 6 caracteres”, equalTo: “Las password introducidas no son iguales” },

        nick: { required: “Por favor, introduzca su nombre de usuario”, minlength: “El usuario debe tener mas de 6 caracteres” },

        nombre: “Debe introducir su nombre y apellido.”,

        email: “Debe introducir un email válido.”,

        agree: “Acepte nuestros Terminos de uso.”
        }

        });
        });

        ————————————————————–

        Y el PHP aca

        include(“conect.php”);

        $nick=$_REQUEST['nick'];
        $sql=”SELECT `usuario` FROM `usuarios` WHERE `usuario`=’$nick’”;
        $res=mysql_query($sql,$conec);
        $total=mysql_num_rows($res);

        $cadena = $nick;
        $longitud = contar_cadena($cadena);

        if($longitud==0){

        }else{

        if($longitud0)
        {
        // El usuario existe en la Base de Datos
        echo “

        Usuario ocupado o no disponible

        “;
        echo 0;
        }
        else
        {

        // Ese nick esta libre
        echo “

        Usuario Disponible

        “;
        echo 1

        }
        }
        }
        ?>

        • Alberto

          En el PHP en vez de devolver mensajes como “Usuario ocupado o no disponible”, haz lo que te dije en el primer comentario, devuelve 1 o 0 y luego compruebalo con jQuery.

          • Matias Sosa

            es que justamente no se como comprobarlo con jQuery eso es lo que no me entienden jaja, no se nada de jQuery yo lo unico que hice fue mostrar los mensajes de “usuario ocupado o no Diponible” y le agregue unos efectos con css y unas imagenes y quedo de diez. me gustaria poder dejarlo asi. no hay una forma de mandar los valores de 0 y 1 por hidden? y luego tomarlo del jQuery?

          • Alberto

            Te recomiendo que te leas unos cuantos de tutoriales de jQuery, sino vas a estar muy perdido.

            function verificar(){
            $.ajax({
            type:“GET”,
            url:”vef.php”,
            data:”nick=”+$(“#nick”).val(),

            success:function(msg){
            $(“#final”).html(msg);
            }})
            }

            Para comprobarlo sería algo así (dentor del success):


            function verificar(){
            $.ajax({
            type:“GET”,
            url:”vef.php”,
            data:”nick=”+$(“#nick”).val(),

            success:function(msg){

            if(msg == 1)

            {

            alert("el usuario existe");

            }else{

            alert("usuario disponible");

            }
            }})
            }

      • Matias Sosa

        estoy usando jquery validate para validar los campos y hasta el momento todo bien, tambien implemente el codigo para verificar el nombre de usuario existente en la base de datos y anda bien, el unico problema es que si el usuario existe el formulacio se ejecuta igual y no deberia me falta poner una condicion para devolver un RETURN o algo asi.…. adjunto el script.

        PD: son 2 script diferentes aplicado al mismo formulario, se pueden unir los codigos logrando toda la validacion?

        function verificar(){
        $.ajax({type: “GET”,url:”vef.php”,data:”nick=”+$(“#nick”).val(),success:function(msg){
        $(“#final”).html(msg);

        }})
        }

        $(document).ready(function() {
        $(“#ok”).hide();

        var usuarioValido;
        $.validator.addMethod(“regex”,function(value,element,regexp){
        var re= new RegExp(regexp);
        return this.optional(element) || re.test(value);
        },”Solo caracteres alfanumericos”);

        $(“#formulario”).validate({
        rules: {
        clave1: { required: true, minlength: 6 },
        clave2: { required: true, minlength: 6, equalTo: “#clave1″},
        nick: { required: true, minlength: 6, regex:”^[a-zA-Z0-9_]+$” },
        nombre: { required: true, minlength: 2},
        email: { required:true, email: true},

        agree: {required: true}
        },

        messages: {
        clave1: { required: “Por favor, introduzca su password”, minlength: “Su clave debe tener mas de 6 caracteres” },

        clave2: { required: “Por favor, introduzca de nuevo su password”, minlength: “Su clave debe tener mas de 6 caracteres”, equalTo: “Las password introducidas no son iguales” },

        nick: { required: “Por favor, introduzca su nombre de usuario”, minlength: “El usuario debe tener mas de 6 caracteres” },

        nombre: “Debe introducir su nombre y apellido.”,

        email: “Debe introducir un email válido.”,

        agree: “Acepte nuestros Terminos de uso.”
        }

        });
        });

        ————————————————————–

        Y el PHP aca

        include(“conect.php”);

        $nick=$_REQUEST['nick'];
        $sql=”SELECT `usuario` FROM `usuarios` WHERE `usuario`=’$nick’”;
        $res=mysql_query($sql,$conec);
        $total=mysql_num_rows($res);

        $cadena = $nick;
        $longitud = contar_cadena($cadena);

        if($longitud==0){

        }else{

        if($longitud0)
        {
        // El usuario existe en la Base de Datos
        echo “

        Usuario ocupado o no disponible“;
        echo 1;
        }
        else
        {

        // Ese nick esta libre
        echo “

        Usuario Disponible“;
        echo 0;
        }
        }
        }
        ?>

  • Felipe Garcia Lopez

    Cordial saludo, hice todo como está pero me sale el error de alert y miro la consola y tengo un error interno 500, me podrían ayudar por favor gracias

    • Alberto

      Si obtienes un error 500, es que no estás poniendo bien la ruta del archivo al que llamas con Ajax.

  • Pedro Manuel Crespo Jiménez

    Hola¡
    Estoy haciendo un formulario dinámico con Bootstrap 3 que cuando pasen cosas, como email inválido y passwords diferentes…me salten alerts de Bootstrap, esos divs que tiene, no los de javascript…y me gustaría saber que hacer con ajax para lamar al código php y que me devuelva una variable a jquery, E.J.: var disponible = 0 ó 1, y depende de eso hago un fadeIn en un alert o no.Como podria hacer eso con ajax y php, osea, devolver por el php una variable a ajax.
    Saludos, y muchas gracias de antemano¡

  • Mauricioft

    esta variable b $user = $_POST['b']; es enviada desde el $.ajax data: “b=”+consulta,

  • Jonathan Valencia

    Hola funciona muy bien gracias, solo quisiera saber como devolver los otros campos de la tabla de la consulta por ajax y ponerlos en el formulario.

  • C Andres Giraldo

    Me gustaria que en el input text si existe entonces se añada addClass(“hasSuccess”) sino el hasError de bootstrap, lo que hace es marcar el borde del input de un color verde o rojo, sin embargo aplicar el hasSuccess es facil pues se añade la clase dentro del Success: pero RemoveClass remover la clase presente y aplicar el hasError es el problema.

    • C Andres Giraldo

      Ok solucionado con lo de echo 1 echo 0;

  • Mauro

    hola, muchas gracias, aprendi mucho con este codigo pero estoy perdido, con esta funcion paso una variable, como puedo hacer para pasar mas variables ? Por Ejemplo el Nombre de Usuario y la direccion de Correo, asi chequeo si existe ese usuario con ese correo.
    Actualmente uso variables de session para eso pero supongo que se pueden enviar mas variables.

  • adri

    Hola,
    Lo primero muchas gracias por tu aporte.
    Lo he implementado y funciona, lo he cambiado para que controle cuando pulso el boton enviar del formulario, pero aunque funciona, y salta el mensaje de error, se envia el formulario y no se como impedir el submint. He puesto cuando devuelve la funcion return false si el email existe, pero no hace nada.
    Gracias

  • adri

    Hola,
    Lo primero muchas gracias por tu aporte.
    Lo he implementado y funciona, he hecho algunos cambios y usado la funcion click para que se active cuando pulse el boton, el problema tanto con tu codigo como con el mio es que muestra el mensaje de error pero no evita que el formulario sea enviado, y no se como controlado, he probado con un return false pero no lo cancela y lo manda igual.
    Gracias

  • Laila Beatríz Jiménez Alvarado

    Una duda, como puedo llamar a la funcion php si tengo el codigo en el mismo archivo, osea en el jQuery en url como la llamo?

  • abrkof

    alguien me puede ayudar con una pequeña validacion de un campo con php? tengo un pequeño sistema de administracion de usuarios que estoy desarrollando para una tesis, y me estoy dando riata con el metodo de cambiar la contraseña de usuario actualemente logeado, es un framework basado en CodeIgniter, el codigo es el siguiente:

    formulario de cambio de contraseña:

    ‘frm-cambiar_clave’, ‘id’=>’frm-cambiar_clave’, ‘class’=>’form-horizontal’)); ?>

    ‘control-label’)); ?>

    ‘password’, ‘name’=>’clave_act’, ‘id’=>’clave_act’, ‘autofocus’=>’clave_act’)); ?>

    ‘control-label’)); ?>

    ‘password’, ‘name’=>’clave_new’, ‘id’=>’clave_new’)); ?>

    ‘control-label’)); ?>

    ‘password’, ‘name’=>’clave_rep’, ‘id’=>’clave_rep’)); ?>

    ‘submit’, ‘content’=>’Confirmar’, ‘class’=>’btn btn-primary’)); ?>

    acceso al controlador inicio:

    public function cambiar_clave(){

    if ($this->cambiook()){

    return FALSE;

    } else {

    $this->redirect(‘inicio/home’);

    }

    }

    public function cambiook(){

    $act = $_REQUEST['clave_act'];

    $new = $_REQUEST['clave_new'];

    return $this->usuariolib->cambiarPWD(md5($act), md5($new));

    }

    Libreria de validación:

    public function cambiarPWD($act, $new){

    if($this->ABRKOF->session->get_userdata(‘usuario_id’) == null){

    throw new Exception(‘No existe el usuario o los datos de sesión vienen vacios’);//return FALSE;

    }

    $id = $this->ABRKOF->session->get_userdata(‘usuario_id’);

    $usuario = $this->ABRKOF->model_usuario->find($id);

    if(strlen($usuario->password) == strlen($act)){

    $data = array(‘id’ => $id,

    ‘password’ => $new);

    $this->ABRKOF->model_usuario->update_pass($data);

    } else {

    throw new Exception(‘La Nueva Contraseña No Coincide Con La Contraseña Actual’);//return FALSE;

    }

    }

  • Pierre

    Una consulta estoy trabajando con una base de datos que es diferente esta dentro de un servidor y esta basada en ampscript como podría hacer la conexión mediante el archivo php

    ?

  • sergio esparza

    Realice el ejemplo, funciona bien.., pero de 10 intentos 3 salen como disponibles cuando ya existen en la DB, a que se debera?

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR