Vamos realizar un ejemplo de un formulario completo para validar. Las validaciones se hacen en el propio navegador antes de enviarlo. Si hubo alg\u00fan campo no relleno o con informaci\u00f3n err\u00f3nea, el formulario muestra el campo que est\u00e1 incorrecto y solicita al usuario que lo cambie. Si todos los datos del formulario son correctos se env\u00eda el formulario.<\/p>\n
Hemos querido hacer un formulario sencillo, para que el ejercicio no se haga demasiado complicado. No obstante, se realizan validaciones en campos con distintos valores, para hacerlo m\u00e1s variado. Se comprueba un campo donde debe figurar un texto, otro donde debe introducirse un n\u00famero mayor que 18 y un \u00faltimo con un campo select donde deben haber seleccionado un valor.<\/p>\n
Lo primero que debemos considerar para que todo funcione como esperamos es declarar los tags del formulario y del bot\u00f3n submit como mostramos a continuaci\u00f3n:<\/p>\n
<form name=\"fvalida\" method=\"POST\">\r\n ...\r\n<input type=\"button\" value=\"Enviar\" onclick=\"validarform()\"><\/pre>\nNos debemos fijar expresamente en el tag <form> que no lleva action=\u00bb\u00bb, los datos se env\u00edan mediante el m\u00e9todo POST y tiene un name=\u00bbfvalida\u00bb.<\/p>\n
Tendremos un bot\u00f3n type=\u00bbbutton\u00bb que al hacer click en \u00e9l, ejecutaremos la funci\u00f3n validarform(). En medio de estos tags tendremos todos los inputs del formulario.<\/p>\n
La funci\u00f3n javascript validarform() es la que se encarga de mostrarnos los mensajes de error si en los campos del formulario no se ha introducido una cadena de texto esperada.<\/p>\n
<script type=\"text\/javascript\">\r\nfunction validarEntero(valor){\r\n \/\/intento convertir a entero.\r\n \/\/si era un entero no le afecta, si no lo era lo intenta convertir\r\n valor = parseInt(valor)\r\n\r\n \/\/Compruebo si es un valor num\u00e9rico\r\n if (isNaN(valor)) {\r\n \/\/entonces (no es numero) devuelvo el valor cadena vacia\r\n return \"\"\r\n }else{\r\n \/\/En caso contrario (Si era un n\u00famero) devuelvo el valor\r\n return valor\r\n }\r\n}\r\n\r\nfunction validarform(){\r\n \/\/valido el nombre\r\n if (document.fvalida.nombre.value.length==0){\r\n alert(\"Tiene que escribir su nombre\")\r\n document.fvalida.nombre.focus()\r\n return 0;\r\n }\r\n\r\n \/\/valido la edad. tiene que ser entero mayor que 18\r\n edad = document.fvalida.edad.value\r\n edad = validarEntero(edad)\r\n document.fvalida.edad.value=edad\r\n if (edad==\"\"){\r\n alert(\"Tiene que introducir un n\u00famero entero en su edad.\")\r\n document.fvalida.edad.focus()\r\n return 0;\r\n }else{\r\n if (edad<18){\r\n alert(\"Debe ser mayor de 18 a\u00f1os.\")\r\n document.fvalida.edad.focus()\r\n return 0;\r\n }\r\n }\r\n\r\n \/\/valido el inter\u00e9s\r\n if (document.fvalida.interes.selectedIndex==0){\r\n alert(\"Debe seleccionar un motivo de su contacto.\")\r\n document.fvalida.interes.focus()\r\n return 0;\r\n }\r\n\r\n \/\/el formulario se envia\r\n alert(\"Muchas gracias por enviar el formulario\");\r\n document.fvalida.submit();\r\n}\r\n<\/script><\/pre>\n