roso205
Usuario (Venezuela)
Hola amigos de taringa, hasta hace poco estuve haciendo una pagina web, y fue un poco complicado hacer la validación de los datos de un formulario, después de varias horas de búsqueda logre entender como hacer esta validación y decidí escribir este tutorial para que otras personas que tengan esta duda no necesiten buscar en muchas partes. Es claro que información sobre como validar un formulario hay mucha en gran cantidad de paginas, pero siempre es en formularios muy genéricos, por lo cual es complicado para un principiante poner en practica esa información en formularios mas extensos. El formulario que vamos a validar tiene los campos necesarios para entender bien la validación, y además la manera de aplicar el código javascript nos permite reutilizarlo. Cabe destacar que soy estudiante de computación y el método que explico en las siguientes líneas es el que me pareció mas eficiente, si consideran que se puede mejorar háganmelo saber y con gusto modificare el tutorial. Ya expresada mi motivación comencemos el tutorial, espero que les sea útil. Como dice el titulo validaremos formularios con html5, esta nueva versión del lenguaje cuenta con un innovador atributo que nos permite hacer la validación del formulario de manera nativa, es decir, sin la necesidad de crear código adicional al de nuestra pagina web. El atributo «required» Al incluir el atributo required dentro de un elemento <input>, automáticamente se hace obligatorio su llenado y al ser un atributo tipo booleano, solo se es necesaria su presencia. Como se menciono anteriormente, con required solo se necesita de cualquier valor en el elemento <input> para ser válido, pero utilizando el atributo pattern en conjunto, se logra que se verifique no solo la presencia de un valor, sino que este valor debe contener un formato, una longitud o un tipo de dato especifico. Esto último se logra definiendo un patrón con expresiones regulares. En este caso estamos pidiendo que el dato solo contenga números y sea de 8 dígitos de longitud. El title muestra la información que se le dará al usuario cuando pase el cursor sobre el cuadro o se genere la corrección. Si en el atributo type colocamos “number” el campo solo permitirá números, pero esto no era el tipo de restricción que me estaban solicitando directamente. Si por el contrario deseamos validar que sea un correo electrónico solo necesitamos colocar el valor “email” en el atributo type. El formulario completo nos quedaría de la siguiente manera: Hasta este momento todo estaría bien, esto funciona en navegadores que ejecuten correctamente html5, por ejemplo: Chrome y Firefox. Pero la vida no es tan buena y tenemos que garantizar que nuestro formulario se valide en cualquier navegador. Como aun mucha gente utiliza el navegador por defecto de mocosoft, es necesario utilizar javascript para hacer esta validación. Si observamos la primera línea del formulario notaran que colocamos el atributo onSubmit="return validar(this)" enctype="multipart/form-data", es necesario colocar estos atributos para que el formulario llame a la función de javascript( en este caso llamada validar) y valide el formulario antes de ser enviado al archivo que lo va a procesar. El atributo action lo deje vacío, porque este tutorial es solo para validar el formulario y no para procesar los datos introducidos en el. Hagamos una función en javascript la cual colocaremos entre las etiquetas <heat></heat> de nuestro código html. Esta función tendrá como nombre validar. <head> <script> function validar(formulario){ //aquí va el codigo// } </script> </head> ¿Que código vamos a colocar en esa función? Bueno, decidí colocar 3 funciones una que valide que una palabra solo tiene letras, otra que valide que una palabra solo tenga números y una que valide en email. Hice esas funciones para asi poder llamarla con cada uno de los campos del formulario de esa forma si el formulario tiene mas campos que los que tiene el ejemplo, solamente debemos hacer la llamada a estas funciones para validar el campo. Función para validara que las palabras solo contengan letras: Función para validara que las palabras solo contengan números: Función que valida el email: El llamado a estas funciones lo haremos de la siguiente manera: Para validar el nombre, apellido y cedula: El condicional pide que la palabra tenga un tamaño mínimo para verificarla cada quien puede colocar la longitud que prefiera. Edad y sexo: en la edad verificamos que este entre 14 y 30 años. El celular: Y por último el correo, noten que en esta validación se verifica que sea un correo valido y que además los dos correos sean iguales: Si el formulario pasa todas estas condiciones se envía la información hacia el archivo que va a procesar los datos. Esto es todo, espero que le sea de ayuda, el código lo pueden descargar de este link: www.4shared.com/document/fVVfvHMa/validaformulario.html es un archivo html, utilicen el editor de texto que quieran para editarlo. comenten y punteen, cualquier cosa que deba mejorar díganmelo que intentare arreglarlo lo antes posible.