{"id":392,"date":"2011-07-02T16:12:02","date_gmt":"2011-07-02T16:12:02","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=392"},"modified":"2018-07-04T07:45:23","modified_gmt":"2018-07-04T07:45:23","slug":"jquery-php-validate","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/jquery-php-validate\/","title":{"rendered":"Validar formulario con jquery y recibir con PHP"},"content":{"rendered":"

Si nos gusta utilizar jQuery <\/strong>en el desarrollo de aplicaciones podemos hechar un vistazo al siguiente script que utiliza el jQuery para validar los datos introducidos en los campos al pulsar el bot\u00f3n enviar sin recargar por completo la p\u00e1gina.<\/p>\n

Despu\u00e9s se utiliza PHP para recibir los datos para guardarse en una base de datos o para hacer lo que sea necesario.<\/p>\n

Para implementarlo puedes ver el c\u00f3digo fuente del ejemplo para ver como es el c\u00f3digo jQuery. El formulario a utilizar ser\u00eda el siguiente:<\/p>\n

<form action=\"index.php\" method=\"post\" name=\"myform\" id=\"myform\" onSubmit=\"return checkForm(this);\">\r\n   <table>\r\n      <tr>\r\n         <td><label for=\"usuario\">Usuario<\/label><\/td>\r\n\t <td><input name=\"nombre\" id=\"nombre\" type=\"text\" value=\"\" onblur=\"checkField(this);\" \/><\/td>\r\n      <\/tr>\r\n      <tr>\r\n         <td><label for=\"pass\">Contrase&ntilde;a<\/label><\/td>\r\n         <td><input name=\"password\" id=\"password\" type=\"password\" value=\"\" onblur=\"checkField(this);\" \/><\/td>\r\n      <\/tr>\r\n   <\/table>\r\n   <br \/>\r\n   <input name=\"subbtn\" id=\"subbtn\" type=\"submit\" value=\"Enviar\" \/>\r\n<\/form><\/pre>\n
Si nos fijamos en el c\u00f3digo anterior, vemos que el formulario al enviarse llama a la funci\u00f3n checkForm(this) en la cual se validan los campos del formulario mediante jQuery.<\/p>\n
Tambi\u00e9n vemos que solo vamos a jugar con dos datos (usuario y contrase\u00f1a) y en cada input estamos ejecutando onblur=\u00bbcheckField(this);\u00bb. Con ello lo que hacemos es que al abandonar el input se validan mediante jQuery los datos introducidos.<\/p>\n
Si los datos introducidos ya son los esperados se proceder\u00eda a tratar los datos mediante PHP. Lo podr\u00edamos hacer de la siguiente forma:<\/p>\n
<?php\r\nif (isset($_POST['subbtn'])) {\r\n   echo '<p>Los datos enviados son correctos!<\/p>';\r\n   echo 'Usuario: '.$_POST['nombre'].'<br>';\r\n   echo 'Password: '.$_POST['password'].'<br><br>';\r\n}\r\n?><\/pre>\n
En este caso, simplemente estamos mostrando los datos recibidos tras pulsar el bot\u00f3n de enviar pero dentro de este c\u00f3digo podr\u00eda haber otra programaci\u00f3n como por ejemplo guardar los datos en la base de datos o en un archivo, comprobar si existen esos datos en la base de datos y todo lo que puedas imaginar.<\/p>\n
Ver ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Si nos gusta utilizar jQuery en el desarrollo de aplicaciones podemos hechar un vistazo al siguiente script que utiliza el jQuery para validar los datos introducidos en los campos al pulsar el bot\u00f3n enviar sin recargar por completo la p\u00e1gina. Despu\u00e9s se utiliza PHP para recibir los datos para guardarse en una base de datos […]<\/p>\n","protected":false},"author":1,"featured_media":4422,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,3],"tags":[79],"class_list":["post-392","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","category-php","tag-inputs"],"yoast_head":"\nValidar formulario con jquery y recibir con PHP - 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 y recibir con PHP - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Si nos gusta utilizar jQuery en el desarrollo de aplicaciones podemos hechar un vistazo al siguiente script que utiliza el jQuery para validar los datos introducidos en los campos al pulsar el bot\u00f3n enviar sin recargar por completo la p\u00e1gina. Despu\u00e9s se utiliza PHP para recibir los datos para guardarse en una base de datos […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/jquery-php-validate\/\" \/>\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=\"2011-07-02T16:12:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-07-04T07:45:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/07\/jquery5.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\/jquery-php-validate\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/jquery-php-validate\/\",\"name\":\"Validar formulario con jquery y recibir con PHP - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jquery-php-validate\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jquery-php-validate\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/07\/jquery5.png\",\"datePublished\":\"2011-07-02T16:12:02+00:00\",\"dateModified\":\"2018-07-04T07:45:23+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jquery-php-validate\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/jquery-php-validate\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jquery-php-validate\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/07\/jquery5.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/07\/jquery5.png\",\"width\":256,\"height\":256},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jquery-php-validate\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Validar formulario con jquery y recibir con PHP\"}]},{\"@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 y recibir con PHP - 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 y recibir con PHP - Jose Aguilar Blog","og_description":"Si nos gusta utilizar jQuery en el desarrollo de aplicaciones podemos hechar un vistazo al siguiente script que utiliza el jQuery para validar los datos introducidos en los campos al pulsar el bot\u00f3n enviar sin recargar por completo la p\u00e1gina. Despu\u00e9s se utiliza PHP para recibir los datos para guardarse en una base de datos […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/jquery-php-validate\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2011-07-02T16:12:02+00:00","article_modified_time":"2018-07-04T07:45:23+00:00","og_image":[{"width":256,"height":256,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/07\/jquery5.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\/jquery-php-validate\/","url":"https:\/\/www.jose-aguilar.com\/blog\/jquery-php-validate\/","name":"Validar formulario con jquery y recibir con PHP - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/jquery-php-validate\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/jquery-php-validate\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/07\/jquery5.png","datePublished":"2011-07-02T16:12:02+00:00","dateModified":"2018-07-04T07:45:23+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/jquery-php-validate\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/jquery-php-validate\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/jquery-php-validate\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/07\/jquery5.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/07\/jquery5.png","width":256,"height":256},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/jquery-php-validate\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Validar formulario con jquery y recibir con PHP"}]},{"@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\/392","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=392"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/392\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/4422"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}