{"id":1374,"date":"2012-01-14T16:37:42","date_gmt":"2012-01-14T16:37:42","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=1374"},"modified":"2015-07-14T22:02:57","modified_gmt":"2015-07-14T22:02:57","slug":"livevalidation","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/livevalidation\/","title":{"rendered":"Validar formulario con Livevalidation Standalone"},"content":{"rendered":"

Existe una librer\u00eda javascript que nos permite validar nuestros formularios de forma muy simple en el lado cliente para que no se env\u00eden al servidor datos erroneos.<\/p>\n

Esta librer\u00eda se llama Livevalidation Standalone. Puedes visitar su p\u00e1gina oficial para ver con m\u00e1s detalle de que se trata, ver ejemplos, descarga del script y toda su documentaci\u00f3n.<\/p>\n

\"\"<\/a><\/p>\n

Siempre que utilizemos un validador en el lado cliente siempre tendremos que validar en el servidor con PHP por si se produce el caso de que el usuario tuviese deshabilitado el javascript en su navegador.<\/p>\n

Lo primero que tendremos que hacer para utilizar esta librer\u00eda en nuestros formularios es incluir su script en el <head> de nuestr\u00e1 p\u00e1gina:<\/p>\n

<script type=\"text\/javascript\" src=\"js\/livevalidation_standalone.compressed.js\"><\/script><\/pre>\n
Despu\u00e9s ya en nuestros formularios deberemos ver y tratar aquellos campos que deban ser obligatorios o tener alg\u00fan formato especial. Por ejemplo, vamos a jugar con el campo email que podr\u00eda ser uno de los m\u00e1s completos.<\/p>\n
<input id=\"email\" name=\"email\" type=\"text\" \/>\r\n<script type=\"text\/javascript\">\r\nvar email = new LiveValidation('email');\r\nemail.add(Validate.Presence);\r\nemail.add(Validate.Email);\r\n<\/script><\/pre>\n
En cada campo que se quiera validar deberemos incluir un script con el anterior. Si nos fijamos, se utiliza una connotaci\u00f3n orientada a objetos en la cual estamos realizando una instancia de la clase LiveValidation pasando como par\u00e1metro el name del input.<\/p>\n
En las 2 l\u00edneas siguientes lo que se comprueba es que en el campo haya datos y seguidamente tengan como expresi\u00f3n regular el formato de email. As\u00ed de simple nos podemos ahorrar un mont\u00f3n de c\u00f3digo.<\/p>\n
Si vemos el ejemplo en funcionamiento podremos ver el efecto que se menciona y la validaci\u00f3n de un campo en el cual solo se pueden introducir n\u00fameros y otro en el cual se necesita la presencia de alg\u00fan car\u00e1cter.<\/p>\n
Si todos los datos que se introduzcan son correctos solo faltar\u00e1 procesar esos datos con PHP:<\/p>\n
<?php\r\nif (isset ($_POST['send'])) {\r\n   echo 'Name: '.$_POST['name'].'<br\/>';\r\n\u00a0\u00a0 echo 'Edad: '.$_POST['edad'].'<br\/>';\r\n\u00a0\u00a0 echo 'E-mail: '.$_POST['email'].'<br\/><br\/>';\r\n}\r\n?><\/pre>\n
Aqu\u00ed simplemente si se pulsa el bot\u00f3n de enviar estamos imprimiendo por pantalla los datos enviados. Con estos datos se podr\u00edan hacer muchos otros procesos como enviar un email o guardar en base de datos como m\u00e1s comunes.<\/p>\n
Ver ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Existe una librer\u00eda javascript que nos permite validar nuestros formularios de forma muy simple en el lado cliente para que no se env\u00eden al servidor datos erroneos. Esta librer\u00eda se llama Livevalidation Standalone. Puedes visitar su p\u00e1gina oficial para ver con m\u00e1s detalle de que se trata, ver ejemplos, descarga del script y toda su […]<\/p>\n","protected":false},"author":1,"featured_media":6469,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,3],"tags":[84,77],"class_list":["post-1374","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-php","tag-formularios","tag-validaciones"],"yoast_head":"\nValidar formulario con Livevalidation Standalone - 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 Livevalidation Standalone - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Existe una librer\u00eda javascript que nos permite validar nuestros formularios de forma muy simple en el lado cliente para que no se env\u00eden al servidor datos erroneos. Esta librer\u00eda se llama Livevalidation Standalone. Puedes visitar su p\u00e1gina oficial para ver con m\u00e1s detalle de que se trata, ver ejemplos, descarga del script y toda su […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/livevalidation\/\" \/>\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-14T16:37:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-07-14T22:02:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\" \/>\n\t<meta property=\"og:image:width\" content=\"282\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\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\/livevalidation\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/livevalidation\/\",\"name\":\"Validar formulario con Livevalidation Standalone - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/livevalidation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/livevalidation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"datePublished\":\"2012-01-14T16:37:42+00:00\",\"dateModified\":\"2015-07-14T22:02:57+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/livevalidation\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/livevalidation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/livevalidation\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"width\":282,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/livevalidation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Validar formulario con Livevalidation Standalone\"}]},{\"@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 Livevalidation Standalone - 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 Livevalidation Standalone - Jose Aguilar Blog","og_description":"Existe una librer\u00eda javascript que nos permite validar nuestros formularios de forma muy simple en el lado cliente para que no se env\u00eden al servidor datos erroneos. Esta librer\u00eda se llama Livevalidation Standalone. Puedes visitar su p\u00e1gina oficial para ver con m\u00e1s detalle de que se trata, ver ejemplos, descarga del script y toda su […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/livevalidation\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-01-14T16:37:42+00:00","article_modified_time":"2015-07-14T22:02:57+00:00","og_image":[{"width":282,"height":300,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.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\/livevalidation\/","url":"https:\/\/www.jose-aguilar.com\/blog\/livevalidation\/","name":"Validar formulario con Livevalidation Standalone - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/livevalidation\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/livevalidation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","datePublished":"2012-01-14T16:37:42+00:00","dateModified":"2015-07-14T22:02:57+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/livevalidation\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/livevalidation\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/livevalidation\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","width":282,"height":300},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/livevalidation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Validar formulario con Livevalidation Standalone"}]},{"@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\/1374","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=1374"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1374\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/6469"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=1374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=1374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=1374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}