Comprobar disponibilidad de nombre de usuario en vivo

Cuando queremos hacer un formulario de registro de usuarios o de elementos que deseamos que su nombre sea único y que no puede estar duplicado en la base de datos, podemos usar en nuestros campos de texto del formulario una validación para comprobar la disponibilidad o existencia del nombre en vivo.

Esto también se puede aplicar para la validación de emails únicos. También se podría comprobar en el momento si un email ya existe en la base de datos o cualquier dato que se te ocurra.

En el ejemplo que se ilustra asociado a esta entrada, vamos a ver un formulario donde el usuario puede indicar su nombre o nickname para registrarse o iniciar sesión en una página Web. Vamos a comprobar la disponibilidad del nombre de usuario en vivo utilizando la tecnología Ajax para enviar la petición al servidor sin necesidad de recargar la página.

Esto lo vamos a conseguir utilizando las siguientes tecnologías: HTML, jQuery, AJAX, PHP y MySQLi.

Código jQuery

En la cabecera de la página o dentro de la etiqueta <head> agregaremos la librería jQuery y el script que permite la validación en vivo de nuestro campo “username”:

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {	
    $('#username').on('blur', function() {
        $('#result-username').html('<img src="images/loader.gif" />').fadeOut(1000);
 
        var username = $(this).val();		
        var dataString = 'username='+username;
 
        $.ajax({
            type: "POST",
            url: "check_username_availablity.php",
            data: dataString,
            success: function(data) {
                $('#result-username').fadeIn(1000).html(data);
            }
        });
    });              
});    
</script>

Este código también puede ser agregado en la parte de abajo de la página justo antes de la etiqueta de cierre </body>.

En este caso, estamos esperando a que se termine de escribir un nombre de usuario en nuestro campo de texto con identificador “username” y como estamos utilizando el evento “blur”, en el momento de cambiar de campo será cuando se realice la validación del contenido del campo. Puedes utilizar “keyup” para realizar la validación por cada tecla que pulsa el usuario.

Cuando se ejecuta este evento, mostramos una imagen para indicar al usuario que se está cargando o buscando algo durante 1 segundo. La típica imagen de loading. Seguidamente realizamos una llamada Ajax enviándole el valor de nuestro campo de texto “username” para ejecutar el archivo “check_username_availablity.php” que se encarga de revisar si el nombre de usuario introducido existe en la base de datos.

Mediante el success del Ajax mostramos un error en caso de que el nombre de usuario exista o un mensaje de confirmación de usuario disponible.

Código PHP

El archivo PHP que se ejecuta en el servidor en la llamada Ajax contiene lo siguiente:

<?php 
require('config.php');
sleep(1);
if (isset($_POST)) {
    $username = (string)$_POST['username'];
 
    $result = $connexion->query(
        'SELECT * FROM users WHERE username = "'.strtolower($username).'"'
    );
 
    if ($result->num_rows > 0) {
        echo '<div class="alert alert-danger"><strong>Oh no!</strong> Nombre de usuario no disponible.</div>';
    } else {
        echo '<div class="alert alert-success"><strong>Enhorabuena!</strong> Usuario disponible.</div>';
    }
}

En este archivo estamos incluyendo el archivo “config.php” que se encarga de establecer la conexión con la base de datos utilizando MySQLi.

Si no sabes conectar con la base de datos utlizando MySQLi puedes darle un vistazo al siguiente tutorial -> Interactuar con una base de datos utilizando Mysqli.

Una vez se conecta con la base de datos, paramos la ejecución un segundo mediante la función sleep() para mantener el efecto de cargando y si hemos recibido datos, hacemos la consulta que retorna todos los datos del usuario en el caso de que existiera.

Este archivo retorna una cadena con el mensaje de error o confirmación que es procesado en el success del Ajax que hemos comentado antes.

Código HTML

 

 

 

 

El formulario que hay que agregar dentro del <body> de la página puede ser algo como lo siguiente:

<form action="#" method="post">
    <div class="form-group">
        <label for="username">Usuario</label>
        <input type="text" class="form-control" id="username" name="username" placeholder="Introduce tu nombre...">
        <small class="form-text text-muted">Elige "jose" o "maria" siendo usuarios que ya existen en base de datos.</small><br/>
        <div id="result-username"></div>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="Escribe tu password aqui...">
    </div>	
</form>

Ver demo Descargar

Esta entrada ha sido editada el 01/11/2018.

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (42 votos, promedio: 4,95 de 5)
Cargando…
Comparte en las redes sociales

134 respuestas a “Comprobar disponibilidad de nombre de usuario en vivo”

  1. Carlos dice:

    Que tal amigp me gusto el codigo pero como le hago para al presionar un boton de enviar me valide y no al dejar el campo saludos

    • Jose Aguilar dice:

      Hola Carlos que tal,

      acabo de realizar los cambios necesarios para que funcione tal como comentas. Debes añadir un botón que al hacer click se realize el código jQuery

      Lo puedes ver en la siguiente url:
      http://www.jose-aguilar.com/scripts/jquery/live-username-checking/index3.php

      Espero te sirva,
      Saludos

      • Carlos dice:

        Que tal amigo gracias por tu respuesta pero ahora tengo un problema bueno lo que yo intento hacer es validar una matricula que si no existe me marque el error de que la matricula no existe y si se encuentra disponible que me redirecione a otra archivo php donde llenara unos datos pero en este tiene que estar matricula impresa osea la tengo que pasar por metodo POST o que me recomiendas hacer??? lo intente con el ejemplo que me pasastes pero al estar correcto no me manda ala otra pag php se queda en la misma…
        Disculpa las molestias y espero puedas ayudarme 😀

        • Jose Aguilar dice:

          Hola Carlos,

          Pues como solución veo que hagas una redirección en el jquery después de haber realizado la comprobación:

          window.location = “url”;

          • Carlos dice:

            Gracias amigo eso fue exactamente lo que hice ya me funciono 😀 gracias por todo tal ves tenga mas dudas y espero puedas ayudarme saludos y que estes bien

  2. Carlos dice:

    Que tal amigo yo de nuevo y molestando espero puedas ayudarme con esto como le hago para pasar una variable javascript a php te pongo el código:

    $(document).ready(function() {
    $(‘.boton’).click(function(){

    var username = $(‘input#username’).val();
    $(“.error”).remove();
    if( username != “” ){
    var dataString = ‘username=’+username;

    $.ajax({
    type: “POST”,
    url: “cliente_validar_nni.php”,

    data: dataString,
    success: function(data) {

    if(data===’Si se pudo’){
    //Aquí es donde quiero que la variable username se pase a otro php donde la voy a mostrar como le puedo hacer???
    window.location.href = ‘cliente_datos_personales.php?nni=’+username;

    }else if(data===’No existe’){
    $(“.nombre”).focus().after(“Su NNI o No de serie es incorrecto.”);
    return false;
    }
    }
    });
    }else $(“.nombre”).focus().after(“Campo obligatorio.”);
    return false;
    });
    });

    Saludos amigo

    • Carlos dice:

      deberas como puedes ver en:window.location.href = ‘cliente_datos_personales.php?nni=’+username;
      pasa la variable por metodo GET el problema es que se ve en la url y por seguridad no quiero que sea asi de que otra forma puedo hacerlo saludos

  3. Helder dice:

    Amigo te agradeceria mucho si pusieras tu codigo completa para descargar, por favor, gracias espero tu respuesta…!

  4. Helder dice:

    Oye amigo puedes poner el codigo para descargar del ultimo ejemplo con boton que te ha solicitado el amigo Carlos, xfavor me urge…!

  5. Joaquin dice:

    Gracias, gracias, gracias. Me funcio a la perfecccion!!!!

    Lo que tienen de malo las otras explicaciones que estan en internet es que no tienen el archivo adjunto para bajar. sin ese archivo con el codigo funcionando la explicacion esta por la mitad. por eso este articulo es muy bueno porque tiene la explicacion y el archivo adjunto.

    Saludos.

    Joaquin.-

  6. escort girls Paris dice:

    Je vais vraiment l’amour pour vous d’invités poster sur votre propre blog

  7. Luis Contreras dice:

    Ese proceso es sencillo, lo interesante es desactivar el boton submit en caso de que quiera registrar ese nombre de usuario ya existente.

    • Carlos S dice:

      Hola amigo como desactivo el botón enviar en caso de que usuario este registrado, trabajando con la opción onBlur, gracias por el aporte esta muy claro el tuto.

      • Jose Aguilar dice:

        Para desactivar el botón deberás añadir la siguiente linea de código dentro del onBlur:

        $(‘input#id_button’).attr(‘disabled’, ‘disabled’);

        Espero que te sirva,
        Saludos

  8. Juan Flores dice:

    buenisimo eso esta mas q de maravilla

  9. Juan Flores dice:

    buenisimo eso esta mas q de maravilla, felicitacion sigue adelante con tus aportes q la vdd ayudas a muchos principiantes como en mi caso mil gracias

  10. adryan Hernandez dice:

    Excelente aporte amigo, por personas como usted es que nosotros los programadores novatos aprendemos… gracias !!

  11. Luis dice:

    Llego el novato al que naa le sale xD
    El problema que tengo es que la primera ves me carga la imagen del loader pero no imprime el mensaje de \"disponible\" o \"ocupado\" (ya revise la coneccion con la db y esta bien) y el segundo error que me pasa es que solo carga cuando saco el foco la primera ves cuando escribo otro titulo para el post \"en este caso\" ya no hace ni el intento de cargar de nuevo para comprobar :S ayuda
    ok voy con el code que tengo:

    <code>
    <head>
    <script type=\"text/javascript\" src=\"http://jqueryjs.googlecode.com/files/jquery-1.3.2.js\"></script>
    <script type=\"text/javascript\">
    $(document).ready(function() {
    $(\’#titulop\’).blur(function(){
    $(\’#check_t\’).html(\'<img src=\"http://…..loaders/loading32.gif\" alt=\"\" />\’).fadeOut(1000);
    var titulop = $(this).val();
    var dataString = \’titulop=\’+titulop;
    $.ajax({
    type: \"POST\",
    url: \"http://…../title_RQS.php\",
    data: dataString,
    success: function(data) {
    $(\’#check_t\’).fadeIn(1000).html(data);
    }
    });
    });
    });
    </script>
    </head>
    <span class=\"input\">
    <input type=\"text\" name=\"titulop\" id=\"titulop\" class=\"input-unstyled\" value=\"\" size=\"45\">
    </span>
    <div id=\"check_t\"></div>
    </code>

    Tengo eso en html y en php esto:

    <code>
    <?php
    sleep(1);
    require_once(\’../../../../../public_html/_config/core.php\’);
    if($_REQUEST) {
    $titulo = $_REQUEST[\’titulop\’];
    $query = \"select * from xx_blog where titulo= \’\".strtolower($titulo).\"\’\";
    $results = mysql_query($query) or die(mysql_error());
    if(mysql_num_rows(@$results) > 0) {
    echo \'<div id=\"Error\">Ya existe un post con este titulo</div>\’;
    }
    else {
    echo \'<div id=\"Success\">Titulo Perfecto</div>\’;
    }
    }
    ?>
    </code>

    • Jose Aguilar dice:

      El código jquery lo veo correcto. Mira de realizar cambios en el archivo php como por ejemplo quitar la condición if($_REQUEST) { o puede que sea la versión jquery

  12. ESteban dice:

    Te agradecería si explicaras detalladamente la parte de javascript y la de ajax.. (php lo entiendo xD)

    ejemplo estos dos términos repetidos ¿de sonde salen y que hacen?:
    var dataString = ‘username=’+username;

    Mu bueno el articulo, te seguiré de cerca :d

    • Jose Aguilar dice:

      Con el jquery y ajax lo que estamos haciendo es espeprar a que se escriba algo en el campo con id=“username” del formulario y al salirse del campo, es decir, al hacer el efecto blur, mostramos la imagen de cargando durante un segundo, obtenemos el valor del campo “username” y se lo pasamos mediante el método POST a un archivo PHP empleando la tecnología AJAX.

      La variable dataString va relacionada con el método POST y la empleo para pasar los datos que se han escrito en el campo que estamos verificando al archivo PHP que es el que se encarga de observar en la base de datos si el usuario que se ha escrito existe o no. Esta variable es importante porque contiene la información escrita en el campo y si te fijas en el ajax tenemos el siguiente atributo;

      data: dataString,

  13. gerardo dice:

    hola estube mirando ese codigo y esta exelente quise tomar la idea solo que tengo un inconveniente como puedo hacer para que la consulta sea una consulta para muchos me explico mejor quiero adaptar esto para verificar datos de de articulos entonces sii el usuario del sistema ingresa q va a verificar 4 articulos en otra pantalla me desplegara 4 campos para ingresarlos al darlo al primero tab me despliega si existe o no y asi sucesivamente me imagino que se utiliza un ciclo for tanto en el formulario inicial como en el formulario donde se encuentra la consulta mi problema es con la parte de la consulta :s noc como hacer para que sea una consulta dinamica que trabaje con base al ciclo for si alguien amablemente me ayudara les estaria muy agradecido :S

    • Jose Aguilar dice:

      No acabo de entender muy bien lo que pretendes explicarme pero según entiendo quieres que al verificar la existencia del usuario se desplegue 4 campos de los artículos? Me imagino que lo que quieres hacer lo debes hacer dentro del jQuery con la función html()

      $(‘#campos’).html(‘‘).slideDown();

      Algo asi

  14. Nico dice:

    Sos un genio!! A Favoritos este sitio maestro!!!
    Abrazo de gol!!!

  15. Esteban dice:

    Hola Jose, muy bueno el script! Anda de maravillas! Yo lo implemente en un formulario de registro y el tema es que me lo registra igual a pesar de avisarme que el usuario ya existe! Como hago para que no me ejecute el submit si el usuario existe??
    Gracias capo…

  16. Esteban dice:

    Barbaro jose! Sos un capo! La ultima y no te jodo mas….vos sabes que yo lo aplique para el mail tambien y me anda joya…lo que probe hacer es poner el script en un archivo .js y linkearlo desde el pero no me funciono. Tiene que ir el codigo si o si dentro del . Te pregunto por cuestion de estetica nomas, para que no me quede tan cargado el de codigo y prefiero linkearlo…
    Gracias de nuevo!
    Sos un grande!!

  17. Esteban dice:

    Ahh pero no me lo inserta en la base de datos…..lo chequea al presionar el boton pero no lo inserta… como hago para que me ejecute el action del form??

  18. carlos dice:

    Que tal amigo tengo una duda, como hago para que al momento de insertar una matrícula en ves del disponible, me aparescan los datos personales del usuario como lo hace con el blur saludos y espero puedas ayudarme
    PD. felicidades por tu pagina me ha ayudado mucho

    • Jose Aguilar dice:

      Pues lo tienes fácil amigo,

      Tan solo tienes que cambiar el código Ajax del jquery (pasándole como parámetro la matrícula) y en el archivo PHP realizar la consulta necesaria para obtener los datos personales del usuario de esa matrícula, luego tan solo lo muestra con el echo.

      saludos,

  19. carlos dice:

    Que tal amigo tengo una duda, como hago para que al momento de insertar una matrícula en ves del disponible, me aparescan los datos personales del usuario como lo hace con el <b>blur</b> saludos y espero puedas ayudarme
    PD. felicidades por tu pagina me ha ayudado mucho

  20. Camilo dice:

    Buenas tarde amigo muy bueno el tuto lo trabaje y me funciono de mil amores, pero tengo un problemita trate de pasarlos a jsp. “ya que me encuentro realizando un aplicativo en jsp con mysql” y la verdad estoy por volverme loco, si pudieras darme una manito te agradecería demasiado.

    muchas gracias…

  21. emiliano dice:

    hola como podria hacer si tengo que verificar mas de un campo por ejemplo un codigo y un nombre. Gracias espero tu respuesta.

  22. aicruz dice:

    Hola si quiese validar que el nombre introducido por el usuario difiere al menos en un 5% de otro existente ya en la base de datos como podría hacerlo?

  23. Mauricio dice:

    Muchas gracias por el aporte. Muy bueno, me ha sido muy útil.
    Saludos!

  24. Diana dice:

    Estimado Jose, muy bueno el ejemplo, practico y entendible. Quisiera preguntarte, Siguiendo con tu ejemplo ¿Como se podria hacer para que el mensaje fuese un Alert y no dentro un DIV?

  25. Agustin Aguero dice:

    Saludos Jose Tengo la Siguiente pregunta con respecto a este codigo no se si te daras cuenta que si el campo usuario esta vacio aun asi valida si exite oh no. ¿Como evito que me valide si el campo esta vacio? Gracias de Antemano

  26. Fred dice:

    Felicidades por tu blog Jose Aguilar muy buenos ejemplos..solo tengo una duda sobre el codigo y quisiera resolverla: al dejar el campo vacio de la caja de texto de username muestra la leyenda de campo valido como hacer que eso no aparesca si queda vacio gracias de antemano buen dia 🙂

  27. Fred dice:

    muchas gracias por la pronta respuesta jose aguilar aorita lo checo y gracias de nuevo buen dia 🙂

  28. Josep F dice:

    hola jose buenas tardes molestando otra vez tengo 2 dudas que no e podido resolver :

    1- como verificar dentro del codigo javascript que el campo de texto no este vacio e intendado poniendo esto
    if($(“#nombre”).val().length > 1) {

    ejecutar codigo ajax..
    esto lo hago para evitar el mensaje de usuario disponible cuando el campo esta vacio pero no me funciona como le hago 🙁

    2.- como desactivo el boton enviar si el usuario ya existe (nota cheque el ejmplo del index 3y este no tiene nada distinto que evalue la acccion si el usario existe o no)
    gracias de antemano espero me puedas ayudar..

    • Jose Aguilar dice:

      hola,

      1- Podrías probar con lo siguietne:
      if($(‘#nombre’).val() != ”) {

      2- Para desactivar el botón deberás hacer algo como lo siguiente:
      $(‘#id_button’).attr(‘disabled’, ‘disabled’);

      pero se debe cambiar varias cosas extra de este tutorial tanto del archivo php como del success del ajax.

  29. Josep F dice:

    hola jose buenas tardes quisiera hacerte 2 preguntas:

    1-e aplicado la setencia de:

    if($("#caja de texto").val().length > 1) {
    //si el campo no esta vacio
    ejecuto el codigo jquery para la validacion de usuario
    esto lo hago con el objetivo de evitar el mensaje de usuario disponible si el campo esta vacio pero nome funciona
    }

    2.- como hago para desactivar el boton si el usuario ya existe nota: ya cheque tu ejemplo incluido en la descarga index3 yno entiendo como desactivas el boton si el usuario ya existe ...
    gracias de antemano dios te bendiga y gracias por compartir conocimiento :)

  30. Carlos s dice:

    tengo el mismo problema para impedir que se envie el formulario cuando existe un usuario.He revisado todos los ejemplos, pero no puedo.Lo he intentado con este codigo que he escrito pero tampoco.
    Si puedes compartir el codigo completo , te lo agradeceria un saludo.

    codigo mio dentro del ajax:

    success: function(data) {
    $(‘#Info’).fadeIn(1000).html(data);

    var val=’Disponible’;
    if ($(‘#Info’).value==val)
    {
    return true;

    }else
    {

    return false;
    }

    • martin cecilio dice:

      para que impidas que se envie el formulario, pues colocar una funcion por separado al boton en un jaca scrip que te valide que todos los campos esten completos.

      if(document.(nombre de tu formulario).(nombre del texto a validar).value ==””){
      alert(“el campo esta vacio”);
      }
      else
      {

      document.(nombre del formulario).submit();
      }

      y asi validas los campos que quieras.

    • martin cecilio dice:

      para que impidas que se envie el formulario, pues colocar una funcion por separado al boton en un jaca scrip que te valide que todos los campos esten completos.

      if(document.(nombre de tu formulario).(nombre del texto a validar).value ==\"\"){
      alert(\"el campo esta vacio\");
      }
      else
      {

      document.(nombre del formulario).submit();
      }

      y asi validas los campos que quieras.

  31. Carlos s dice:

    Tengo el mismo problema para impedir que se envie el formulario cuando existe un usuario.He revisado todos los ejemplos, pero no puedo.Lo he intentado con este codigo que he escrito pero tampoco.
    Si puedes compartir el codigo completo , te lo agradeceria un saludo.

    codigo mio dentro del ajax:

    success: function(data) {
    $(\’#Info\’).fadeIn(1000).html(data);

    var val=\’Disponible\’;
    if ($(\’#Info\’).value==val)
    {
    return true;

    }else
    {

    return false;
    }

  32. martin cecilio dice:

    Gracias muchas gracias. cuidese mucho y que dios lo bendiga. “Estudiante de ing en sistemas computacionales”.

  33. martin cecilio dice:

    Gracias muchas gracias. cuidese mucho y que dios lo bendiga. \"Estudiante de ing en sistemas computacionales\".

  34. Jose Caero dice:

    Perdona la ignorancia pero podrias explicarme que significa y que hacen las lineas de codigo en las que añado comentario:

    $(document).ready(function() {
    $(‘#username’).blur(function(){

    $(‘#Info’).html(”).fadeOut(1000);

    var username = $(this).val(); //que significa “this”
    var dataString = ‘username=’+username; //para que se usa el dataString

    $.ajax({
    type: “POST”,
    url: “check_username_availablity.php”,
    data: dataString,
    success: function(data) {
    $(‘#Info’).fadeIn(1000).html(data);
    }
    });
    });
    });

    gracias de antemano.

    • Jose Aguilar dice:

      Hola buenos días,

      var username = $(this).val(); //En esta caso lo que estamos haciendo es recuperar el valor del input en el que tengamos el cursor. El this hace referencia al elemento en el que esté tu cursor.

      var dataString = ‘username=’+username; //La variable dataString es una variabla para construir los parámetros que le vamos a pasar al achivo php vía ajax. En el archivo “check_username_availabilti.php” te darás cuenta que estamos utilizando la variable username pasada con el método POST –> $_POST[‘username’].

      Espero haberte aclarado,
      saludos

  35. Jose Caero dice:

    tengo esta funcion para checar disponibilidad de usuario, por favor si podrias checarlo y darme tu opinion:

    var inputUsername = $(“#username”);
    var reqUsername = $(“#req-username”);

    function validateUsername(){
    //NO tiene valores ingresados
    if(inputUsername.val().length == 0){
    reqUsername.removeClass(“noshow”);
    reqUsername.html(“Enter a username”);
    }
    //NO cumple longitud minima
    else if(inputUsername.val().length < 4){
    reqUsername.removeClass("noshow");
    reqUsername.html("Minimum 4 characters");
    return false;
    }
    // SI longitud, NO VALIDO numeros y letras
    else if(!inputUsername.val().match(/^[0-9a-zA-Z]+$/)){
    reqUsername.removeClass("noshow");
    reqUsername.html("Only numbers and alphabetic chars");
    return false;
    }
    HASTA AQUI TODO BIEN NO HUBO PROBLEMAS
    mi problema es aqui: quiero poner dentro de este condicional el codigo tuyo…
    else if(QUE CONDICION RECOMIENDAS QUE PONGA AQUI){
    $('#username').blur(function(){

    $('#Info').html('’).fadeOut(1000);

    var username = $(this).val();
    var dataString = ‘username=’+username;

    $.ajax({
    type: “POST”,
    url: “check_username_availablity.php”,
    data: dataString,
    success: function(data) {
    $(‘#Info’).fadeIn(1000).html(data);
    }
    });
    });
    }
    // SI longitud, SI caracteres A-z
    else{
    reqUsername.addClass(“noshow”);
    return true;
    }
    }

  36. Jose Caero dice:

    tengo esta funcion para checar disponibilidad de usuario, por favor si podrias checarlo y darme tu opinion:

    var inputUsername = $(\"#username\");
    var reqUsername = $(\"#req-username\");

    function validateUsername(){
    //NO tiene valores ingresados
    if(inputUsername.val().length == 0){
    reqUsername.removeClass(\"noshow\");
    reqUsername.html(\"Enter a username\");
    }
    //NO cumple longitud minima
    else if(inputUsername.val().length < 4){
    reqUsername.removeClass(\"noshow\");
    reqUsername.html(\"Minimum 4 characters\");
    return false;
    }
    // SI longitud, NO VALIDO numeros y letras
    else if(!inputUsername.val().match(/^[0-9a-zA-Z]+$/)){
    reqUsername.removeClass(\"noshow\");
    reqUsername.html(\"Only numbers and alphabetic chars\");
    return false;
    }
    HASTA AQUI TODO BIEN NO HUBO PROBLEMAS
    mi problema es aqui: quiero poner dentro de este condicional el codigo tuyo…
    else if(QUE CONDICION RECOMIENDAS QUE PONGA AQUI){
    $(\’#username\’).blur(function(){

    $(\’#Info\’).html(\'<img src=\"loader.gif\" alt=\"\" />\’).fadeOut(1000);

    var username = $(this).val();
    var dataString = \’username=\’+username;

    $.ajax({
    type: \"POST\",
    url: \"check_username_availablity.php\",
    data: dataString,
    success: function(data) {
    $(\’#Info\’).fadeIn(1000).html(data);
    }
    });
    });
    }
    // SI longitud, SI caracteres A-z, SI disponible
    else{
    reqUsername.addClass(\"noshow\");
    return true;
    }
    }

  37. Alvaro dice:

    quisiera que me brindaran el codigo de este mira http://www.jose-aguilar.com/scripts/jquery/live-username-checking/index3.php esque lo he intentado de todas formas y no me sale AYUDAAAAA

  38. Swami dice:

    Muy buen aporte!
    Muchas Graciassss!

  39. Alexander dice:

    Amigo me interesa tu ejercicio, pero no esta el archivo de conexion a base de datos, y los enlaces de descargas que has colocado no funcionan!. Puedes colocar algunas de las dos opciones? Saludos

  40. kk dice:

    Gracias. Me sirvio de mucho!

  41. pachyta dice:

    hola muy bueno el codigo, como le agrego que ademas del usuario me compruebe el email si existen..gracias saludos

  42. Joan dice:

    Que nombre le colocaron a la base de datos y usaron privilegios de usuario y contraseña en mysql ??

  43. eduardo dice:

    que excelente aporte.. pero como hago para comprobar que el usuario este disponible y que ademas el correo no este registrado.. ya posteriormente que me mande a la siguiente pagina?? ayuuudaaaaa!!! porfaaavooooor!!!

    • Jose Aguilar dice:

      Lo que tendrás que hacer es añadir más control en el archivo check_username_availablity.php. En el siguiente enlace tienes una función que te valida un email –> http://www.jose-aguilar.com/blog/validar-email-php/

      Además tendrás que hacer una consulta a la base de datos para ver si existe el email que se está escribiendo.

      Saludos

      • diana dice:

        hola muy bueno tu articulo y funciona muy bien. tengo una duda. cuando me diga que el usuario existe como hago para bloquear los demás campos, se que con esto $(“#id_elemento”).attr(“disabled”, “disabled”); puedo hacerlo. pero como haria la condicion en el jquery 🙂 .

  44. Claudio dice:

    Estimado Jose, ante todo mi admiración por tus conocimientos y principalmente por tu sencillez y generosidad.
    Apelando a esta ultima te muestro un código que tengo y quiero terminar de agregarle la excelente validación de este post.
    CODIGO

    function validateStep1(){

    var isValid = true;

    // Validate Username

    var un = $(‘#username’).val();

    if(!un && un.length <= 0){

    isValid = false;

    $('#msg_username').html('Complete Usuario').show();

    }else{
    $('#username').blur(function(){

    $('#msg_username').html('’).fadeOut(1000);

    var username = $(this).val();
    var dataString = ‘username=’+username;

    $.ajax({
    type: “POST”,
    url: “check_username_availablity.php”,
    data: dataString,
    success: function(data) {
    $(‘#msg_username’).fadeIn(1000).html(data);
    //alert(data);
    }
    });
    });
    $(‘#msg_username’).html(”).hide();

    }

    el código sigue pero con el agregado de tu código funciona muy bien, pero me faltaría algo. Al validar la existencia del nombre de usuario, necesitaría como ves en el código java, que me permita asignarle a la siguiente variable
    var isValid = true;
    si esta disponible o
    var isValid = false;
    si no lo esta. en verdad estoy tratando de hacerlo dentro del codigo q ya tengo pero no me doy cuenta como.
    Felicitaciones y muchas gracias..!!
    Claudio

  45. Claudio dice:

    Aun sigo sin resolver el problema.
    Espero que pronto pueda ayudarme, muchas gracias..!!
    Claudio

  46. Gustavo Arias dice:

    Hola, estoy usando jquery para validar los campos de mi formulario pero cuando inserto tu codigo ya no me funciona el jquery, puedes ver porque ocurre esto, te anexo mi codigo.

    $(document).ready(function() {

    $(‘#Email’).blur(function(){
    $(‘#Info’).html(”).fadeOut(1000);
    var username = $(this).val();
    var dataString = ‘username=’+username;
    $.ajax({
    type: “POST”,
    url: “check_username_availablity.php”,
    data: dataString,
    success: function(data) {
    $(‘#Info’).fadeIn(1000).html(data);
    //alert(data);
    }
    });
    });

    $(“#ok”).hide();
    $(“#formid”).validate({
    rules: {
    Email: { required:true, email: true, minlength: 4, maxlength:30},
    Password: { required: true, minlength: 2, maxlength:15},
    Password_again: {equalTo: “#Password”}
    },
    messages: {
    Email : {
    required : “Debe ingresar el email”,
    email : “Debe ingresar un email valido”,
    minlength : “EL email debe tener un minimo de 4 caracteres”,
    maxlength : “EL email debe tener un maximo de 30 caracteres”
    },
    Password: {
    required: “Debe ingresar el password”,
    minlength : “EL password debe tener un minimo de 2 caracteres”,
    maxlength : “EL password debe tener un maximo de 15 caracteres”
    },
    Password_again: “Deben ser iguales los passwords”
    },
    submitHandler: function(form) {
    form.submit();
    }
    });
    });

    en vivo en http://www.tabinsoft.com/regente/sign-up.html

  47. Marcelo dice:

    Excelente codigo.. lo estaba necesitando.. lo use y me funciono perfecto..

    Puedo consultarte por un codigo que necesito ? calculo que con jquery va a andar
    Saludos

  48. matias dice:

    que tal jose una pregunta 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. desde ya muchas gracias…. 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);
    $(‘input#”submit’).attr(‘disabled’, ‘disabled’);
    }})
    }

    $(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

    “;
    }
    else
    {

    // Ese nick esta libre
    echo “

    Usuario Disponible

    “;

    }
    }
    }
    ?>

  49. pepote dice:

    Tengo entendido que usar mysql_query es un problema serio de seguridad , no estoy seguro pero informo y si es necesario actualiza el hilo y el código . Saludoss …

  50. Atenas dice:

    hola, me marca la alerta del error T_T que hagoo!!! lo he checado mil veces

  51. Atenas dice:

    escribo todo muy bien, pero me doy cuenta que el problema es que la data no me la regresa, bueno me manda la alerta de error, ya cheque que si se conecte a la bd y si lo hace pero no manda el mensaje de regreso si es o no existente el usuario

  52. Ace dice:

    disculpa que moleste , al momento de ingresar un nombre(que exista en la BD, o no exista , el mensaje que me sale es ok) que es lo que esta mal ????? ya llevo 1 dia buscando , pero no encuentro, en ninguna parte me marca error, por favor una ayuda :(!!!!

  53. jose dice:

    muy bueno muchas gracias sigue haci

  54. Oliverc dice:

    saludos, muchas gracias por compartir tus conocimentos a los que estamos iniciando la programacion, pero creo que nos serviria de mucha ayuda, si nos explicas como bloquear la action o el boton de registrar, en el caso de que el nombre del usuario ya este registrado, dices que tenemos que modificar el codig php y el ajax, e tratado de incluir el $(‘#id_button’).attr(‘disabled’, ‘disabled’); y no logro que funcione, gracias de nuevo por la enorme aporte a nuestra formacion,exitos !!

    • Jose Aguilar dice:

      Hola buenas tardes,

      Yo lo que he hecho en algunos proyectos es esconderlo directamente asi:

      $(‘#id_button’).hide();

      Saludos

  55. alexizher dice:

    Hola, el jemplo funciona muy bien haciendo que se muestre en un div, pero si quiero que el resultado seal value de un input=”text” como sería …. Gracias de antemano.

    • Jose Aguilar dice:

      Hola,

      Lo único que cambiaría es lo siguiente:

      $(‘#Info’).fadeIn(1000).html(data);

      Debería pasar a:

      $(‘#username’).val(data);

      No lo he probado pero creo que lo que retorna el ajax en el data debe ser solo texto.

      Saludos

  56. hector dice:

    Buenas noches amigo ya vi en algunos comentarios como se bloquea el boton de submit pero cuando existe se bloquea, pero cuando no existe igual se bloquea debe haber una condicion despues del sucess pero no se amigo podrias ayudarme, otra acotacion que queria decirte que a veces hay usuarios registrados y aveces dice que esta disponible oJo no es para todos de 500 sucede con 100 registros y aveces viceversa tambien no esta registrado y si me dice que existe. espero me ayudes amigo pronto mi correo alex19_3000_2@hotmail.com

  57. byron dice:

    Buenos dias amigo te felicito, me salio todo a la perfeccion, pero tengo una pregunta jose, si quisiera validar otro campo como por ejemplo una cedula como agregaria esta variable sin eliminar de la username, es decir, que esos 2 campos sean unicos.. que cuando meta una cedula me diga que ya existe en la base de datos.. y luego cuando meta una cedula q no exista pase ameter el username y tambien este la condicion de username en vivo y eso.. por favorr me gustaria que me ayudaras de antemano gracias amigo. Saludos

    • Jose Aguilar dice:

      Segun entiendo creo que tan solo tienes que duplicar el código jQuery del username y adaptarlo para la cedula.

      Saludos

      • Daniel dice:

        Podrias poner un ejemplo de como se haría esto, porfavor te lo agradecería infinitamente… 🙂

        • Daniel dice:

          Muchas gracias, pero despues de muchos intentos ya encontre la solución, aqui lo que hice:

          var nombre = $(this).val();
          var num_oficio = $(‘#num_oficio’).val();
          $.ajax({
          type: “POST”,
          url: “viaticos_validar.php”,
          data: {variable1: nombre, variable2: num_oficio},
          success: function(data) {
          $(‘#Info’).fadeIn(1000).html(data);
          //alert(data);
          })

          y en el archivo que conecta con la BD recibo las variables con $_POST

          Saludos

  58. leobaldo dice:

    saludo trate crear un if para que inabilitara el boton mientras daba ERROR, funciona cuando en el primer entento de ingresar un usuario que ya esta en la base de dato este bloquea el botom o lo oculta como me recomendastes, pero al ingresar un usuario valido el botom no se vuelve a activar aqui te dejo el codigo para q me digas que me falta, y gracias por responder nuestras dudas,

    $(document).ready(function() {
    $(‘#cupos1’).blur(function(){

    var cupos1 = $(this).val();
    var dataString = ‘cupos1=’+cupos1;

    $.ajax({
    type: “POST”,
    url: “cupo1.php”,
    data: dataString,
    beforeSend: function(){
    $(‘#Info1’).html(”).fadeOut(1000);
    },
    success: function(data){
    $(‘#Info1’).fadeIn(1000).html(data);
    if(data==”)
    {
    $(‘#id_button’).hide();
    //$(‘#id_button’).attr(‘disabled’, ‘disabled’);
    return false;
    }
    else
    {
    return true;
    }
    }
    });
    });
    });

  59. leobaldo dice:

    saludo trate crear un if para que inabilitara el boton mientras daba ERROR, funciona cuando en el primer entento de ingresar un usuario que ya esta en la base de dato este bloquea el botom o lo oculta como me recomendastes, pero al ingresar por sefunda vez un usuario y esta vez si es valido, el botom no se vuelve a activar, aqui te dejo el codigo para q me digas que me falta, y gracias por responder nuestras dudas.

    perdona pero la pregunta anterior a esta se envio con errores!!

    $(document).ready(function() {
    $(‘#cupos1′).blur(function(){

    var cupos1 = $(this).val();
    var dataString = ‘cupos1=’+cupos1;

    $.ajax({
    type: “POST”,
    url: “cupo1.php”,
    data: dataString,
    beforeSend: function(){
    $(‘#Info1′).html(”).fadeOut(1000);
    },
    success: function(data){
    $(‘#Info1′).fadeIn(1000).html(data);
    if(data==”)
    {
    $(‘#id_button’).hide();
    //$(‘#id_button’).attr(‘disabled’, ‘disabled’);
    return false;
    }
    else
    {
    return true;
    }
    }
    });
    });
    });

  60. Funciona de maravillas!!
    Millones de GRACIAS..!!!!!!

  61. carlos dice:

    Muchas Gracias funciona Perfecto!

  62. Antonio dice:

    Hola muy buen código, gracias, pero me preguntaba ¿Como se le podría hacer para que distinga de mayúsculas y minisculas?, ya que si uso COLLATE latin1_bin en la base de datos, deja de funcionar…

  63. Emiliano dice:

    Hola, gracias por el post me fue de gran ayuda:

    Pero tengo una pregunta si se desea tener más de una comprobación por ejm: la cédula y un correo, para uno solo si funciona normalmente pero cuando intento para otro no sucede nada ni tampoco se produce algún error:

    $(document).ready(function() {
    $(‘#cedula’).blur(function(){

    $(‘#Info’).html(”).fadeOut(6000);

    var username = $(this).val();
    var dataString = ‘username=’+username;

    $.ajax({
    type: “POST”,
    url: “disponibilidad/disponibilidad_empleado.php”,
    data: dataString,
    success: function(data) {
    $(‘#Info’).fadeIn(800).html(data);
    }
    });
    });

    $(‘#corr’).blur(function(){

    $(‘#Info_1’).html(”).fadeOut(6000);

    var username = $(this).val();
    var dataString = ‘username=’+username;

    $.ajax({
    type: “POST”,
    url: “disponibilidad/disponibilidad_corr.php”,
    data: dataString,
    success: function(data) {
    $(‘#Info_1’).fadeIn(800).html(data);
    }
    });
    });
    });

    Gracias por revisar lo planteado.

  64. Jose dice:

    Saludos espero que este post todavia lo respondas. Tengo el siguiente problema al colocar en el campo texto x valor hace la busqueda por no me muestra el mensaje, y luego si cambio el valor del campo de texto hace la busqueda, ¿Que debo hacer?

  65. Carlos Velázquez dice:

    Hola, tu blog me ha ayudado mucho y ahora espero puedas apoyarme con un detalle que tengo.

    La duda es, tengo un formulario, tiene 10 textbox y cada uno controla un número de serie digamos (equipo, mouse, teclado, etc) y quisiera validar que no existan duplicados.

    ¿Podrías apoyarme como realizar esa validación?

    Muchisimas gracias, saludos.

  66. Rodrigo Maldonado dice:

    Hoa jose me puedes ayudar quiero validar un requistro antes de guardar en la base pero el ejemplo tuyo trate de hacerlo pero no me funciona estoy desplegando en un modal

  67. Javier Lenis dice:

    Buenas tardes

    Que buena guía de aprendizaje .
    tengo una pregunta…..

    cuando estoy local me funciona de maravilla
    pero cuando lo subo al host me sale el error del query (ok) para mi (error de conexion)

    ya revise todos los campos. copie la tabla de mi localhost para no tener diferencias pero nada.

    gracias por su ayuda

  68. sergio dice:

    Como obtener el avatar una vez que el correo del usuario sea correcto y asi pasar al siguiente campo?

    • Jose Aguilar dice:

      Hola, imagino que el ajax deberá retorna alguno información relativa al avatar. Podría ser la ruta completa y luego por javascript depositar esa ruta en el atributo src del tag img deseado.

  69. Miguel dice:

    Hola Jose, buenos días y gracias por tus estupendo aportes.
    Tengo una duda y llevo todo el dia dandole vuelta.
    He modificado el codigo de forma que al introducir el codigo del cliente, me indique si existe o no. Hasta aqui todo correcto.
    Pero como hago para que en caso de que dicho codigo existe me muestre El Nombre del Cliente en lugar de “usuario ya existente”
    He probado a modificar la linea
    echo ‘Usuario ya existente’;
    pero no doy con la tecla.

  70. Raul Ortiz dice:

    Muchas gracias por tu ejemplo. Gracias !!

  71. Raul Ortiz dice:

    Jose …. muchas gracias. Funciona perfecto. Ya lo acomode a mi necesidad. Funciona perfecto. Necesito ponerlo en un input no en una etiqueta div, como se haria. Gracias !!

    • Jose Aguilar dice:

      Hola, para ponerlo en un input deberás hacerlo así:

      En vez de:
      $(‘#Info’).fadeIn(1000).html(data);

      Deberas poner:
      $(‘#input_id’).val(data);

      Espero te sirva,
      Saludos

  72. Raul Ortiz dice:

    Jose buen dia. Quedo perfecto en el input. Gracias. Mira que lo puse en otra pagina php, y no funciona. Lo unico diferente en esta pagina es que tiene dos formularios y ambos formularios funcionan bien hacen lo que tienen que hacer. Lo que quiero es validar un dato en un input en uno de los formularios. El tener dos formularios en un archivo php afecta que no funcione ?

    Gracias por tu ayuda. Gracias

  73. Raul Ortiz dice:

    Jose, buenas noches. Disculpa Ya funciona perfecto. Fue un error mio, las instrucciones del javascript las puse dentro de un .
    Gracias. Funciona perfecto. Seguire con mi proyecto a ver como me queda. Gracias. Luego te lo comparto. Mil gracias.

  74. Raul Ortiz dice:

    Mi proyecto va super. Luego te lo comparto. Gracias

  75. Michael Parra dice:

    Hola Jose, muchas gracias por tu grán aporte. Quisiera saber como deberia acomodarlo para PHP7 teniendo en cuenta que funciona con Mysqli. Lo implementé pero me aparece en el error_log:

    [22-May-2017 15:51:16 America/New_York] PHP Warning: mysqli_query() expects at least 2 parameters, 1 given in /home/prueccd/public_html/crm/form/check_email_availablity.php on line 7

  76. Iran Júnior dice:

    Comprobar disponibilidad de nombre de usuario en vivo – Jose Aguilar Tava precisando de limpar uma lista de emails, e achei o site http://www.validadordeemails.com.br usei e limpei minhas listas de e-mail, realmente é muito bom, tem uns filtros avançados legais… Pra quem quiser retirar e-mails inválidos, uso e indico para meus amigos o site http://www.validadordeemails.com.br muito bom mesmo galera 🙂

  77. Ulises dice:

    amigo soy nuevo en esto, me interesó demasiado lo que expuso un usuario sobre como desactivar el boton en caso de que el usuario ya exista. Leyendo un poco sobre el “onBlur”, no tiendo bien como es que fue implementado para verificar en que momento se debe desactivar el boton.
    Para hacer eso se tiene que insertar directamente en el archivo php ?¿
    0) // not available
    {
    echo ‘Usuario ya existente’;
    echo ”
    $(‘input#id_button’).attr(‘disabled’, ‘disabled’);
    “;
    }
    else
    {
    echo ‘Disponible’;
    echo ”
    $(‘input#id_button’).attr(enabled, enabled);
    “;
    $usuario = 2;
    }

    }?>
    algo asi? me podrias orientar porfavor c:

    • Jose Aguilar dice:

      Hola buenos días,

      Si necesitas desactivar un botón deberás hacerlo desde el javascript que hace la llamada al evento onblur. En el php no me parece correcto.

      Saludos

  78. Paola dice:

    Buenismo, pero tengo una duda, ¿como hago para que el siguiente campo (en este caso contraseña) quede deshabilitado en caso de que el usuario ya exista?.
    Gracias por su pronta respuesta.

    • Jose Aguilar dice:

      Hola,

      Creo que puedes usar algo así en el success del ajax y quizá tengas que cambiar la respuesta ajax para que te retorne un 1 si el usuario existe y un 0 si el usuario no existe.

      Dentro del success hacer algo así:

      //si el usuario existe
      if (data == ‘1’) {
      $(‘#password’).attr(‘disabled’, ‘disabled’);
      }

      Saludos

  79. Luis Fernando dice:

    Que tal José muchas gracias por el aporte, quería saber como hacer para desactivar un botón en caso el usuario exista, este es el código, pero no me sale, queria saber si el problema esta en el php o en el mismo ajax:

    $.ajax({
    type: “POST”,
    url: “check_username_availablity.php”,
    data: dataString,
    success: function(data) {
    $(‘#Info’).fadeIn(1000).html(data);
    //alert(data);
    if (data == ‘1’) {
    $(‘input#boton’).attr(‘disabled’, ‘disabled’);
    $(‘input#password’).value(‘hola’);
    $(‘input#boton’).value(‘hola’);
    }
    }
    });

    En el PHP lo tengo así:

    if($contar == 0)
    echo ‘Usuario ya existente’;
    else
    echo ‘Disponible’;

    • Jose Aguilar dice:

      Hola,

      La implementación no es correcta. No se corresponde con lo que deseas. El PHP debería retornar un ‘1’ para que en este caso el botón se desactive.

      Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.