• Como

    Como Validar Checkboxes, Radiobuttons y Selects con jQuery

    En este tutorial vamos a aprender como validar Checkboxes, Radiobuttons y Selects(menus desplegables) del lado del cliente usando JavaScript + jQuery.

    HTML

    Para el ejemplo usaremos un formulario que tenga los 3 elementos, después del formulario incluimos a jQuery y por ultimo abrimos un script y registramos el evento en que el formulario sea enviado(submit):

    <form action="" class="validar_form" method="post">
    	<h2>Checkbox</h2>
    	<div><input type="checkbox" name="chck[]" value="opt 1 chckd" /><label>Opt 1</label></div>
    	<div><input type="checkbox" name="chck[]" value="opt 2 chckd" /><label>Opt 2</label></div>
    	<div><input type="checkbox" name="chck[]" value="opt 3 chckd" /><label>Opt 3</label></div>
    	<div class="errors error1"></div>
    	<h2>Radio</h2>
    	<div><input type="radio" name="gruporad" value="rad 1 chckd" /><label>Radio 1</label></div>
    	<div><input type="radio" name="gruporad" value="rad 2 chckd" /><label>Radio 2</label></div>
    	<div><input type="radio" name="gruporad" value="rad 3 chckd" /><label>Radio 3</label></div>
    	<div class="errors error2"></div>
    	<h2>Select</h2>
    	<div>
    		<select name="select">
    			<option value="" selected>------</option>
    			<option value="select 1 chckd">Opcion 1</option>
    			<option value="select 1 chckd">Opcion 2</option>
    			<option value="select 1 chckd">Opcion 3</option>
    		</select>
    	<div class="errors error3"></div>
    	</div>
    	<button class="enviar">Enviar</button>
    	</form>
    	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    	<script type="text/javascript">
    		$(".validar_form").submit( function(){
    		     // Aqui ira nuestro codigo
    		});
    	</script>

    Fijaos que después de cada grupo de elementos estoy poniendo un div.errors vacío, allí es donde iran los mensajes de error de validación.

    JavaScript

    Crearemos 3 variables que contendrán los valores de los checkbox, radiobuttons y selects respectivamente, fijaos que en los 3 estamos seleccionando el elemento en un estado especifico(:checked, :checked y :selected) esto es para que solo obtenga el valor si estos están marcados/seleccionados, en caso contrario el valor de la variable seria 0:

    		$(".validar_form").submit( function(){
    			var check = $("input[type='checkbox']:checked").length;
    			var radio = $("input[type='radio']:checked").length;
    			var select = $("select option:selected").val();
    
    		});

    En el caso de checkbox y de radiobuttons se usa .length para determinar el numero de caracteres que existen en la variable, ósea si en el checkbox seleccionan 2 opciones el length vendría a ser 2.

    Validación

    Ahora validaremos el formulario usando unas cuantas condiciones, primero si la variable check esta vacía mostramos .error1 y hacemos return false; para que el form no se envie, hacemos lo mismo con los radio y con el select, en caso que el usuario rellene el formulario correctamente ocultamos los errores y lanzamos un alert(“Ok”) seguido de un return true; que enviara el formulario:

    				if(check == ""){
    					$('.error1').text("Seleccione al menos un checkbox");
    					return false;
    				} else if(radio == ""){
    					$('.error2').text("Seleccione un radio button");
    					return false;
    				} else if(select == ""){
    					$('.error3').text("Seleccione una opcion");
    					return false;
    				} else {
    					$('.errors').hide();
    					alert('Ok!');
    					return true;
    				}

    Código Completo

    	$(".validar_form").submit( function(){
    			var check = $("input[type='checkbox']:checked").length;
    			var radio = $("input[type='radio']:checked").length;
    			var select = $("select option:selected").val();
    
    				if(check == ""){
    					$('.error1').text("Seleccione al menos un checkbox");
    					return false;
    				} else if(radio == ""){
    					$('.error2').text("Seleccione un radio button");
    					return false;
    				} else if(select == ""){
    					$('.error3').text("Seleccione una opcion");
    					return false;
    				} else {
    					$('.errors').hide();
    					alert('Ok!');
    					return true;
    				}	
    		});

    Ver Demostración.

  • Josue Ochoa

    Hola, soy el editor de este blog, trabajo como desarrollador web freelance, sígueme en Twitter.

  • Tal vez te interese
Acerca de

WebTursos es un blog de tutoriales, articulos y recursos para diseñadores y desarrolladores web. mas...

Suscribete

Suscríbete para recibir los últimos posts directamente en tu bandeja de entrada: