{"id":1367,"date":"2012-01-03T23:04:09","date_gmt":"2012-01-03T23:04:09","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=1367"},"modified":"2012-11-05T14:50:05","modified_gmt":"2012-11-05T14:50:05","slug":"validate-form-onfocusout","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/validate-form-onfocusout\/","title":{"rendered":"Validar formulario con jQuery on blur"},"content":{"rendered":"

\"\"<\/a>Una de las formas m\u00e1s comunes de validar formularios con jQuery podr\u00eda ser que tras finalizar el usuario de escribir en el input y salirse de \u00e9l se valide lo introducido en el lado del cliente.<\/p>\n

Explicaremos con detelle como se valida el campo \u00abname\u00bb del ejemplo que se ilustra en este art\u00edculo.<\/p>\n

Lo primero que deberemos hacer como casi siempre que trabajamos con jQuery es incluir las librer\u00edas y estilos que toquen en nuestro <head>:<\/p>\n

<link rel=\"stylesheet\" href=\"general.css\" type=\"text\/css\" media=\"screen\" \/>\r\n<script type=\"text\/javascript\" src=\"jquery.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"validation.js\"><\/script><\/pre>\n
En la hoja de estilos \u00abgeneral.css\u00bb incluiremos los estilos necesarios para mostrar el formulario y los estilos para la muestra de los errores.<\/p>\n
A continuaci\u00f3n veremos que el archivo clave es el \u00abvalidation.js\u00bb que es donde deberemos emplear toda la l\u00f3gica de validaci\u00f3n.<\/p>\n
En el <body> de nuestra p\u00e1gina tendremos un formulario similar al siguiente:<\/p>\n
<form method=\"post\" id=\"customForm\" action=\"\">\r\n   <div>\r\n\u00a0\u00a0    <label for=\"name\">Name<\/label>\r\n\u00a0\u00a0 \u00a0\u00a0 <input id=\"name\" name=\"name\" type=\"text\" \/>\r\n\u00a0\u00a0 \u00a0\u00a0 <span id=\"nameInfo\"><\/span>\r\n\u00a0\u00a0 <\/div>\r\n\r\n   ...\r\n\r\n   <div>\r\n\u00a0\u00a0    <input id=\"send\" name=\"send\" type=\"submit\" value=\"Send\" \/>\r\n\u00a0\u00a0 <\/div>\r\n<\/form><\/pre>\n
Para validar con jQuery tendremos que tener muy en cuenta la id del input para tratarlo. En el caso del campo nombre, tendremos en cuenta su id=\u00bbname\u00bb.<\/p>\n
El archivo \u00abvalidation.js\u00bb estar\u00e1 listo o pendiente a los eventos que sucedan dentro del formulario.<\/p>\n
Lo primero que haremos es guardar en una variable la id del campo a tratar de la siguiente forma:<\/p>\n
var name = $(\"#name\");<\/pre>\n
Seguidamente llamar\u00edamos al evento blur que se encargar\u00e1 de ejecutar la funci\u00f3n \u00abvalidateName\u00bb cada vez que nos salgamos del campo con id=\u00bbname\u00bb.<\/p>\n
name.blur(validateName);<\/pre>\n
La funci\u00f3n es la siguiente y simplemente se encarga de mirar si el campo con id=\u00bbname\u00bb tiene m\u00e1s de un car\u00e1cter. Si no lo tiene, mostrar\u00e1 un error a su lado al salirse y si hay m\u00e1s de un car\u00e1cter no se mostrar\u00e1 nada. Como puedes observar, en este caso estamos validando de forma sencilla pero se podr\u00eda complicar en funci\u00f3n de los requerimientos.<\/p>\n
function validateName(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/Si no se ha introducido nada en el campo\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if(name.val().length < 1){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0name.addClass(\"error\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0nameInfo.text(\"Debe rellenar su nombre!\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0nameInfo.addClass(\"error\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return false;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/si se ha introducido valor\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0else {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0name.removeClass(\"error\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0nameInfo.text(\"\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0nameInfo.removeClass(\"error\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return true;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0}<\/pre>\n
Esto lo haremos por todas las variables que queramos validar.<\/p>\n
Si los campos son correctos y se pulsase el bot\u00f3n de \u00abenviar\u00bb se enviar\u00eda la informaci\u00f3n al servidor para tratarla con PHP.<\/p>\n
Ver el ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Una de las formas m\u00e1s comunes de validar formularios con jQuery podr\u00eda ser que tras finalizar el usuario de escribir en el input y salirse de \u00e9l se valide lo introducido en el lado del cliente. Explicaremos con detelle como se valida el campo \u00abname\u00bb del ejemplo que se ilustra en este art\u00edculo. Lo primero […]<\/p>\n","protected":false},"author":1,"featured_media":4344,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[84,77],"class_list":["post-1367","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-formularios","tag-validaciones"],"yoast_head":"\nValidar formulario con jQuery on blur - Jose Aguilar Blog<\/title>\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=\"Validar formulario con jQuery on blur - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Una de las formas m\u00e1s comunes de validar formularios con jQuery podr\u00eda ser que tras finalizar el usuario de escribir en el input y salirse de \u00e9l se valide lo introducido en el lado del cliente. Explicaremos con detelle como se valida el campo \u00abname\u00bb del ejemplo que se ilustra en este art\u00edculo. Lo primero […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/validate-form-onfocusout\/\" \/>\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-01-03T23:04:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-11-05T14:50:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/jquery2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"256\" \/>\n\t<meta property=\"og:image:height\" content=\"256\" \/>\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=\"2 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\/validate-form-onfocusout\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/validate-form-onfocusout\/\",\"name\":\"Validar formulario con jQuery on blur - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/validate-form-onfocusout\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/validate-form-onfocusout\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/jquery2.png\",\"datePublished\":\"2012-01-03T23:04:09+00:00\",\"dateModified\":\"2012-11-05T14:50:05+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/validate-form-onfocusout\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/validate-form-onfocusout\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/validate-form-onfocusout\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/jquery2.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/jquery2.png\",\"width\":256,\"height\":256},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/validate-form-onfocusout\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Validar formulario con jQuery on blur\"}]},{\"@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":"Validar formulario con jQuery on blur - Jose Aguilar Blog","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":"Validar formulario con jQuery on blur - Jose Aguilar Blog","og_description":"Una de las formas m\u00e1s comunes de validar formularios con jQuery podr\u00eda ser que tras finalizar el usuario de escribir en el input y salirse de \u00e9l se valide lo introducido en el lado del cliente. Explicaremos con detelle como se valida el campo \u00abname\u00bb del ejemplo que se ilustra en este art\u00edculo. Lo primero […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/validate-form-onfocusout\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-01-03T23:04:09+00:00","article_modified_time":"2012-11-05T14:50:05+00:00","og_image":[{"width":256,"height":256,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/jquery2.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":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/validate-form-onfocusout\/","url":"https:\/\/www.jose-aguilar.com\/blog\/validate-form-onfocusout\/","name":"Validar formulario con jQuery on blur - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/validate-form-onfocusout\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/validate-form-onfocusout\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/jquery2.png","datePublished":"2012-01-03T23:04:09+00:00","dateModified":"2012-11-05T14:50:05+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/validate-form-onfocusout\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/validate-form-onfocusout\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/validate-form-onfocusout\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/jquery2.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/jquery2.png","width":256,"height":256},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/validate-form-onfocusout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Validar formulario con jQuery on blur"}]},{"@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\/1367","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=1367"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1367\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/4344"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=1367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=1367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=1367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}