{"id":2364,"date":"2012-03-30T14:55:52","date_gmt":"2012-03-30T14:55:52","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=2364"},"modified":"2019-04-15T16:07:40","modified_gmt":"2019-04-15T16:07:40","slug":"comprobar-disponibilidad-de-nombre-de-usuario-en-vivo","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo\/","title":{"rendered":"Comprobar disponibilidad de nombre de usuario en vivo"},"content":{"rendered":"<p>Cuando queremos hacer un formulario de registro de usuarios o de elementos que deseamos que su nombre sea \u00fanico y que no puede estar duplicado en la base de datos, podemos usar en nuestros campos de texto del formulario una validaci\u00f3n para comprobar la disponibilidad o existencia del nombre en vivo.<\/p>\n<p>Esto tambi\u00e9n se puede aplicar para la validaci\u00f3n de emails \u00fanicos. Tambi\u00e9n se podr\u00eda comprobar en el momento si un email ya existe en la base de datos o cualquier dato que se te ocurra.<\/p>\n<p>En el ejemplo que se ilustra asociado a esta entrada, vamos a ver un formulario donde el usuario puede indicar su nombre o <em>nickname<\/em> para registrarse o iniciar sesi\u00f3n en una p\u00e1gina Web. Vamos a comprobar la disponibilidad del nombre de usuario en vivo utilizando la tecnolog\u00eda <strong>Ajax<\/strong> para enviar la petici\u00f3n al servidor sin necesidad de recargar la p\u00e1gina.<\/p>\n<p>Esto lo vamos a conseguir utilizando las siguientes tecnolog\u00edas: <strong>HTML<\/strong>, <strong>jQuery<\/strong>, <strong>AJAX<\/strong>, <strong>PHP<\/strong> y <strong>MySQLi<\/strong>.<\/p>\n<h2>C\u00f3digo jQuery<\/h2>\n<p>En la cabecera de la p\u00e1gina o dentro de la etiqueta &lt;head&gt; agregaremos la librer\u00eda <strong>jQuery<\/strong> y el script que permite la validaci\u00f3n en vivo de nuestro campo \u00abusername\u00bb:<\/p>\n<div id=\"wpshdo_1\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_1\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_1\"><\/a><a id=\"wpshat_1\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_1\"  onClick=\"javascript:wpsh_toggleBlock(1)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_code(1)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_print(1)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_1\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\">&lt;script src=&quot;https:\/\/code.jquery.com\/jquery-3.2.1.js&quot;&gt;&lt;\/script&gt;\n<span class=\"sy0\">&lt;<\/span>script type<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;text\/javascript&quot;<\/span><span class=\"sy0\">&gt;<\/span>\n$<span class=\"br0\">&#40;<\/span>document<span class=\"br0\">&#41;<\/span>.<span class=\"me1\">ready<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\t\n    $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#username'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">on<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'blur'<\/span><span class=\"sy0\">,<\/span> <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#result-username'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">html<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'&lt;img src=&quot;images\/loader.gif&quot; \/&gt;'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">fadeOut<\/span><span class=\"br0\">&#40;<\/span>1000<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n        <span class=\"kw2\">var<\/span> username <span class=\"sy0\">=<\/span> $<span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">val<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\t\t\n        <span class=\"kw2\">var<\/span> dataString <span class=\"sy0\">=<\/span> <span class=\"st0\">'username='<\/span><span class=\"sy0\">+<\/span>username<span class=\"sy0\">;<\/span>\n&nbsp;\n        $.<span class=\"me1\">ajax<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span>\n            type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;POST&quot;<\/span><span class=\"sy0\">,<\/span>\n            url<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;check_username_availablity.php&quot;<\/span><span class=\"sy0\">,<\/span>\n            data<span class=\"sy0\">:<\/span> dataString<span class=\"sy0\">,<\/span>\n            success<span class=\"sy0\">:<\/span> <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span>data<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n                $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#result-username'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">fadeIn<\/span><span class=\"br0\">&#40;<\/span>1000<span class=\"br0\">&#41;<\/span>.<span class=\"me1\">html<\/span><span class=\"br0\">&#40;<\/span>data<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n            <span class=\"br0\">&#125;<\/span>\n        <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>              \n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>    \n<span class=\"sy0\">&lt;\/<\/span>script<span class=\"sy0\">&gt;<\/span><\/pre><\/div><\/div>\n<p>Este c\u00f3digo tambi\u00e9n puede ser agregado en la parte de abajo de la p\u00e1gina justo antes de la etiqueta de cierre &lt;\/body&gt;.<\/p>\n<p>En este caso, estamos esperando a que se termine de escribir un nombre de usuario en nuestro campo de texto con identificador \u00abusername\u00bb y como estamos utilizando el evento \u00abblur\u00bb, en el momento de cambiar de campo ser\u00e1 cuando se realice la validaci\u00f3n del contenido del campo. Puedes utilizar \u00abkeyup\u00bb para realizar la validaci\u00f3n por cada tecla que pulsa el usuario.<\/p>\n<p>Cuando se ejecuta este evento, mostramos una imagen para indicar al usuario que se est\u00e1 cargando o buscando algo durante 1 segundo. La t\u00edpica imagen de loading. Seguidamente realizamos una llamada <strong>Ajax<\/strong> envi\u00e1ndole el valor de nuestro campo de texto \u00abusername\u00bb para ejecutar el archivo \u00abcheck_username_availablity.php\u00bb que se encarga de revisar si el nombre de usuario introducido existe en la base de datos.<\/p>\n<p>Mediante el <em>success<\/em> del <strong>Ajax<\/strong> mostramos un error en caso de que el nombre de usuario exista o un mensaje de confirmaci\u00f3n de usuario disponible.<\/p>\n<h2>C\u00f3digo PHP<\/h2>\n<p>El archivo <strong>PHP<\/strong> que se ejecuta en el servidor en la llamada <strong>Ajax<\/strong> contiene lo siguiente:<\/p>\n<div id=\"wpshdo_2\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_2\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_2\"><\/a><a id=\"wpshat_2\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_2\"  onClick=\"javascript:wpsh_toggleBlock(2)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_code(2)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_print(2)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_2\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"php\" style=\"font-family:monospace;\"><span class=\"kw2\">&lt;?php<\/span> \n<span class=\"kw1\">require<\/span><span class=\"br0\">&#40;<\/span><span class=\"st_h\">'config.php'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<a href=\"http:\/\/www.php.net\/sleep\"><span class=\"kw3\">sleep<\/span><\/a><span class=\"br0\">&#40;<\/span>1<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span><a href=\"http:\/\/www.php.net\/isset\"><span class=\"kw3\">isset<\/span><\/a><span class=\"br0\">&#40;<\/span><span class=\"re0\">$_POST<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n    <span class=\"re0\">$username<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">&#40;<\/span>string<span class=\"br0\">&#41;<\/span><span class=\"re0\">$_POST<\/span><span class=\"br0\">[<\/span><span class=\"st_h\">'username'<\/span><span class=\"br0\">]<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n    <span class=\"re0\">$result<\/span> <span class=\"sy0\">=<\/span> <span class=\"re0\">$connexion<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">query<\/span><span class=\"br0\">&#40;<\/span>\n        <span class=\"st_h\">'SELECT * FROM users WHERE username = &quot;'<\/span><span class=\"sy0\">.<\/span><a href=\"http:\/\/www.php.net\/strtolower\"><span class=\"kw3\">strtolower<\/span><\/a><span class=\"br0\">&#40;<\/span><span class=\"re0\">$username<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">.<\/span><span class=\"st_h\">'&quot;'<\/span>\n    <span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n    <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span><span class=\"re0\">$result<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">num_rows<\/span> <span class=\"sy0\">&gt;<\/span> 0<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        <span class=\"kw1\">echo<\/span> <span class=\"st_h\">'&lt;div class=&quot;alert alert-danger&quot;&gt;&lt;strong&gt;Oh no!&lt;\/strong&gt; Nombre de usuario no disponible.&lt;\/div&gt;'<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span> <span class=\"kw1\">else<\/span> <span class=\"br0\">&#123;<\/span>\n        <span class=\"kw1\">echo<\/span> <span class=\"st_h\">'&lt;div class=&quot;alert alert-success&quot;&gt;&lt;strong&gt;Enhorabuena!&lt;\/strong&gt; Usuario disponible.&lt;\/div&gt;'<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span>\n<span class=\"br0\">&#125;<\/span><\/pre><\/div><\/div>\n<p>En este archivo estamos incluyendo el archivo \u00abconfig.php\u00bb que se encarga de establecer la conexi\u00f3n con la base de datos utilizando <strong>MySQLi<\/strong>.<\/p>\n<p>Si no sabes conectar con la base de datos utlizando MySQLi puedes darle un vistazo al siguiente tutorial -&gt;\u00a0<a href=\"https:\/\/www.jose-aguilar.com\/blog\/interactuar-con-una-base-de-datos-utilizando-mysqli\/\" target=\"_blank\" rel=\"noopener noreferrer\">Interactuar con una base de datos utilizando Mysqli<\/a>.<\/p>\n<p>Una vez se conecta con la base de datos, paramos la ejecuci\u00f3n un segundo mediante la funci\u00f3n 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.<\/p>\n<p>Este archivo retorna una cadena con el mensaje de error o confirmaci\u00f3n que es procesado en el <em>success<\/em> del <strong>Ajax<\/strong> que hemos comentado antes.<\/p>\n<h2>C\u00f3digo HTML<\/h2>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/user-exist.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2487 alignleft\" title=\"user-exist\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/user-exist.png\" alt=\"\" width=\"417\" height=\"61\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/user-exist.png 417w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/user-exist-300x43.png 300w\" sizes=\"auto, (max-width: 417px) 100vw, 417px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/user-disponible.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2488 alignleft\" title=\"user-disponible\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/user-disponible.png\" alt=\"\" width=\"355\" height=\"61\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/user-disponible.png 355w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/user-disponible-300x51.png 300w\" sizes=\"auto, (max-width: 355px) 100vw, 355px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>El formulario que hay que agregar dentro del &lt;body&gt; de la p\u00e1gina puede ser algo como lo siguiente:<\/p>\n<div id=\"wpshdo_3\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_3\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_3\"><\/a><a id=\"wpshat_3\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_3\"  onClick=\"javascript:wpsh_toggleBlock(3)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_code(3)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_print(3)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_3\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/form.html\"><span class=\"kw2\">form<\/span><\/a> <span class=\"kw3\">action<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;#&quot;<\/span> <span class=\"kw3\">method<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;post&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;form-group&quot;<\/span>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/label.html\"><span class=\"kw2\">label<\/span><\/a> <span class=\"kw3\">for<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;username&quot;<\/span>&gt;<\/span>Usuario<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/label.html\"><span class=\"kw2\">label<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/input.html\"><span class=\"kw2\">input<\/span><\/a> <span class=\"kw3\">type<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;text&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;form-control&quot;<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;username&quot;<\/span> <span class=\"kw3\">name<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;username&quot;<\/span> placeholder<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;Introduce tu nombre...&quot;<\/span>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/small.html\"><span class=\"kw2\">small<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;form-text text-muted&quot;<\/span>&gt;<\/span>Elige &quot;jose&quot; o &quot;maria&quot; siendo usuarios que ya existen en base de datos.<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/small.html\"><span class=\"kw2\">small<\/span><\/a>&gt;&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/br.html\"><span class=\"kw2\">br<\/span><\/a><span class=\"sy0\">\/<\/span>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;result-username&quot;<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;form-group&quot;<\/span>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/label.html\"><span class=\"kw2\">label<\/span><\/a> <span class=\"kw3\">for<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;password&quot;<\/span>&gt;<\/span>Password<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/label.html\"><span class=\"kw2\">label<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/input.html\"><span class=\"kw2\">input<\/span><\/a> <span class=\"kw3\">type<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;password&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;form-control&quot;<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;password&quot;<\/span> <span class=\"kw3\">name<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;password&quot;<\/span> placeholder<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;Escribe tu password aqui...&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\t\n<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/form.html\"><span class=\"kw2\">form<\/span><\/a>&gt;<\/span><\/pre><\/div><\/div>\n<p style=\"text-align: center;\"><a class=\"btn btn-secondary\" href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/live-username-checking\/\" target=\"_blank\" rel=\"noopener noreferrer\"><i class=\"fa fa-eye\"><\/i> Ver demo<\/a> <a class=\"btn btn-primary\" href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/live-username-checking\/live-username-checking.zip\"><i class=\"fa fa-download\"><\/i> Descargar<\/a><\/p>\n<p style=\"text-align: center;\"><em>Esta entrada ha sido editada el 01\/11\/2018.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tutorial y c\u00f3digo de ejemplo que te permite agregar la funcionalidad que comprueba si un usuario est\u00e1 registrado o no en vivo en tu p\u00e1gina Web.<\/p>\n","protected":false},"author":1,"featured_media":7285,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,149,5,3],"tags":[84,79,77],"class_list":["post-2364","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","category-destacados","category-jquery","category-php","tag-formularios","tag-inputs","tag-validaciones"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comprobar disponibilidad de nombre de usuario en vivo - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Tutorial y c\u00f3digo de ejemplo que te permite agregar la funcionalidad que comprueba si un usuario est\u00e1 registrado o no en vivo en tu p\u00e1gina Web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comprobar disponibilidad de nombre de usuario en vivo - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Tutorial y c\u00f3digo de ejemplo que te permite agregar la funcionalidad que comprueba si un usuario est\u00e1 registrado o no en vivo en tu p\u00e1gina Web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-30T14:55:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-15T16:07:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo\/\",\"name\":\"Comprobar disponibilidad de nombre de usuario en vivo - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo.png\",\"datePublished\":\"2012-03-30T14:55:52+00:00\",\"dateModified\":\"2019-04-15T16:07:40+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Tutorial y c\u00f3digo de ejemplo que te permite agregar la funcionalidad que comprueba si un usuario est\u00e1 registrado o no en vivo en tu p\u00e1gina Web.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo.png\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Comprobar disponibilidad de nombre de usuario en vivo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comprobar disponibilidad de nombre de usuario en vivo - Jose Aguilar Blog","description":"Tutorial y c\u00f3digo de ejemplo que te permite agregar la funcionalidad que comprueba si un usuario est\u00e1 registrado o no en vivo en tu p\u00e1gina Web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Comprobar disponibilidad de nombre de usuario en vivo - Jose Aguilar Blog","og_description":"Tutorial y c\u00f3digo de ejemplo que te permite agregar la funcionalidad que comprueba si un usuario est\u00e1 registrado o no en vivo en tu p\u00e1gina Web.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-03-30T14:55:52+00:00","article_modified_time":"2019-04-15T16:07:40+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo\/","url":"https:\/\/www.jose-aguilar.com\/blog\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo\/","name":"Comprobar disponibilidad de nombre de usuario en vivo - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo.png","datePublished":"2012-03-30T14:55:52+00:00","dateModified":"2019-04-15T16:07:40+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Tutorial y c\u00f3digo de ejemplo que te permite agregar la funcionalidad que comprueba si un usuario est\u00e1 registrado o no en vivo en tu p\u00e1gina Web.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo.png","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Comprobar disponibilidad de nombre de usuario en vivo"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=2364"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2364\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7285"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=2364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=2364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=2364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}