Validaciones basicas con Javascript (Textbox, Combobox, Radiobutton, Checkbox)

Validar los componentes de un formulario en HTML suele ser lo mas habitual (campo de texto, áreas de texto de, radio botones, casillas de verificación), pero les recuerdo que la validación con Javascript es una validación del lado del cliente, y en esto dependemos del navegador, por ende, si el usuario desactiva las actividades de Javascript en el este tipo de validación no tendrá su objetivo, por lo tanto es mejor hacer un tipo de validación del lado del servidor. Pero no esta demás que usemos un poco de javascript.
Las validaciones las creamos con funciones donde verificamos si el usuario ha hecho alguna selección o ha escrito algo en formulario, si el campo es obligatorio este mostrara un mensaje de alerta avisando que debe corregir o llenar dicho campo.

Vamos a ver  ejemplos de algunas de ellas.

1 – Validación de Casilla de texto (type=”text”).

En una casilla de texto hacemos la verificación de que si esta o no vacío. Si es obligatorio y esta vacío obligaremos al usuario a escribir lo requerido para que se envíe el formulario. Esto lo hacemos comprobando si el resultado es igual a null o “”, utilizamos estas dos opciones para estar seguro de su funcionamiento, si el valor es “” osea vacío  o null mostrara una alerta con un mensaje y a la casilla se le aplicara un estilo, en este caso un borde de 2px rojo.

1 – Validación de Radio Botones (type=”radio”).

Este tipo de componente del formulario permitirá seleccionar al usuario una opción de varias disponibles. Lo que comprobamos es que alguna opción del grupo de radios sea elegida, de lo contario se mostrara el alert con su mensaje de corrección y los estilos que queremos aplicar, en este caso un borde rojo, si se ha seleccionado alguno no pasara nada. Esto lo hacemos de la siguiente manera.

1 – Validación de menú-lista despegable (Combobox).

Este es un tipo de menú o lista despegable donde tenemos que elegir alguna opción. Lo que hacemos es verificar que el valor que se envíe no sea nulo o vacío,  si es así mostrar el alert junto a los estilos designado en este caso nuevamente un borde rojo. Para que se envíe el valor no debe de ser null o “” que significa vacío, la primera opción que es la que se mostrar por default, tendrá valor “”, por eso esta opción no la tomara como valida.

Esto es lo que hacemos

1 – Validación de Casillas de verificación (type=”checkbox”).

En este caso se presentan varias opciones donde se pueden elegir mas de una de ellas.  La validación es que nos compruebe si amenos una esta seleccionada, de no ser así que muestre el error.

Para esto hacemos algo así:

 

Esto es todo amigo, muy básico pero útil, espero que te sirva de algo este aporte. Gracias por leerlo. Nos vemos en otro tutosytips.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

6 Respuestas

  1. eduardo dice:

    Muy buen Código siempre es útil

  2. Alvaro dice:

    Excelente aporte

  3. sergio dice:

    Están buenos esos ejemplos, necesito unir un combobox con checkbox para poder elegir varios a la vez. Gracias

  4. Enrique dice:

    muy buena…me ha servido de sobremanera…nada mas q en el ultimo codigo para remarcar las casillas de verificacion le pusiste el name cms de los elementos y deberia de ser el id crs por eso en el ejemplo no los marca…gracias por los ejmplos..sirven de maravilla

  1. marzo 23, 2014

    Si es cierto, me equivoque en esa parte de la verificacion del checkbox, gracias enrique.