En este art\u00edculo vamos a validar en el lado del cliente los campos de un formulario utilizando la librer\u00eda de Mootools.<\/p>\n
Para conseguir validar los campos de un formulario con Mootools, deberemos incluir su librer\u00eda en el <head> de nuestra p\u00e1gina:<\/p>\n
<script type='text\/javascript' src='js\/mootools-core-1.4-full.js'><\/script>\r\n<script type='text\/javascript' src='js\/mootools-more-1.4-full.js'><\/script>\r\n<script type=\"text\/javascript\">\r\n\u00a0\u00a0 \u00a0window.addEvent('domready', function(){\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ The elements used.\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var myForm = document.id('myForm'),\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0myResult = document.id('myResult');\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ Labels over the inputs.\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0myForm.getElements('[type=text], textarea').each(function(el){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0new OverText(el);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0});\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ Validation.\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0new Form.Validator.Inline(myForm);\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ Ajax (integrates with the validator).\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0new Form.Request(myForm, myResult, {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0requestOptions: {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0'spinnerTarget': myForm\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0},\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0extraData: { \/\/ This is just to make this example work.\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0'html': 'Form sent.'\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0});\r\n\r\n\u00a0\u00a0 \u00a0});\r\n<\/script><\/pre>\nSeguramente el script que te descargues de Mootools tendr\u00e1 los textos de validaci\u00f3n en ingl\u00e9s. Si buscas en google, r\u00e1pidamente encontrar\u00e1s una traducci\u00f3n para estos textos.<\/p>\n
En el <body> tendremos un formulario parecido al siguiente:<\/p>\n
<form id=\"myForm\" action=\"request.php\" method=\"post\">\r\n\u00a0\u00a0 \u00a0<fieldset>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<legend>Contact form example<\/legend>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<div>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<p>Nombre:<input type=\"text\" name=\"name\" class=\"required\" \/><\/p>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<p>Email: <input type=\"text\" name=\"email\" class=\"required validate-email\" \/><\/p>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<p>Teléfono: <input type=\"text\" name=\"phone\" \/><\/p>\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<p>Website: <input type=\"text\" name=\"url\" \/><\/p>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<p>Mensaje: <textarea id=\"myMessage\" name=\"message\" rows=\"5\" cols=\"30\" class=\"required\"><\/textarea><\/p>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/div>\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<div><input type=\"submit\" value=\"Send\" \/><\/div>\r\n\r\n\u00a0\u00a0 \u00a0<\/fieldset>\r\n\r\n\u00a0\u00a0 \u00a0<div id=\"myResult\"><\/div>\r\n\r\n<\/form><\/pre>\nComo podemos observar, en el formulario podemos indicar de forma f\u00e1cil que campos van a ser los requeridos y al enviarse el formulario se ejecuta la acci\u00f3n que habr\u00e1 en el archivo \u00abrequest.php\u00bb que servir\u00e1 para procesar los datos.<\/p>\n