Cómo validar radio buttons con jQuery

Es sabido por cualquier persona que cuando haces formularios un paso importante es el de validar los campos, a fin de que la información que quieres que sea necesaria tenga un valor por parte del usuario a como dé lugar. Y no mentirán al decir que validar radio buttons es un dolor de cabeza.

Por eso hoy vamos a ver cómo validar radio buttons en jQuery, porque sinceramente es mucho más fácil y comprensible que en Javascript .

Nivel del tutorial: Intermedio

Demo del tutorial

HTML

Lo más importante que tenemos que recordar en esta parte de HTML es que los botones de radio deben tener el mismo nombre, para que de esa forma pueda funcionar el conjunto de botones para poder seleccionar sólo uno. Si no asignamos el mismo nombre es como si tuviéramos varios grupos de botones, en vez de sólo uno.

Para este tutorial inserté un botón vacío, o sin acciones, para poder programarlo con jQuery. El objetivo es checar el grupo de opciones, para ver si se ha seleccionado alguna opción, independientemente de cuál sea la opción.

jQuery

Ya hecha la estructura nos dedicamos primero a colocar entre los <head></head> el script para importar la librería de jQuery, un paso muy obvia hasta estas alturas.

Y por último hacemos un poco de talacha para poder validar. Les explico lo que hice. Con un condicional lo que hago es verificar el estado de los botones, con el nombre que le asigné, y como es el mismo para el grupo de radios, jQuery checará todos.

En este caso cuando el botón sea presionado hará la validación y responderá con un alert para indicarnos el estado del grupo de opciones. Verificar alguno ya es más sencillo, basta usar el método is() para ver si se está activado uno en especial, aunque para eso tendríamos que asignar un id diferente (el name sigue siendo el mismo para todos)