Validar casillas de seleccion (radio,checkbox)
Seguimos con formularios y validaciones; es bastante común pedir, en un formulario, la selección de uno o más elementos de una lista de opciones dispuestas en forma de objetos radio o check box. supongamos el siguiente formulario:
<form name=”formulario” id=”formulario” >
<p>Selecciona por lo menos una casilla:</p>
<input type=”checkbox” class=”casilla” name=”check1″> Opcion 1<br>
<input type=”checkbox” class=”casilla” name=”check2″> Opcion 2<br>
<input type=”checkbox” class=”casilla” name=”check3″> Opcion 3<br>
<p>Selecciona opción:</p>
<input type=”radio” class=”seleccion” name=”ciudad” value=”1″> sel 1<br>
<input type=”radio” class=”seleccion” name=”ciudad” value=”2″> sel 2<br>
<input type=”radio” class=”seleccion” name=”ciudad” value=”3″> Sel 3<br>
</form>
en el que se presentan dos grupos de selección, una acepta selección multiple y la otra solo permite la seleccion de una opcion; la siguiente función verificara si se ha seleccionado por lo menos una opción de un grupo de radio o check boxes:
jQuery.fn.verificaCheck=function()
{
if($(“.”+$(this).attr(‘class’)+”:checked”).length==0)
{
alert(‘seleccione por lo menos uno’);
$(this).focus();
return false;
} else return true;
}
La forma de usarla, en el caso del ejemplo seria:
$(document).ready(function()
{
if($(‘formulario’).submit(function()
{
if($(‘.casilla’).verificaCheck())
{
if($(‘.seleccion’).verificaCheck())
{
return true;
} else return false;
} else return false;
}
});
Debería funcionar en ambos casos.
Trabajando con select
Seguimos con validaciones: muchas veces necesitamos que sea obligatoria la selección de algun item en especial, supongamos que tenemos el siguiente formulario:
<form id=”formulario”>
<select id=”selector”>
<option value=”O”>..Selecciona número</option>
<option value=”1″>uno</option>
<option value=”2″>dos</option>
</select>
<input type=”submit” value=”enviar”/>
</form>
Definimos la función para determinar si es que se ha elegido un número
jQuery.fn.seleccionado=function()
{
if($(this).val()==O)
{
alert(‘Selecciona un número’);
$(this).focus();
return false;
} else return true;
}
La forma de usar la función seria:
$(document).ready(function()
{
$(‘#formulario’).submit(function()
{
if($(‘#selector’).seleccionado()) return true;
else return false;
});
});
Validar correo electrónico con jQuery
Alguna vez, trabajando con formularios, se tiene que lidiar con validación de datos, veamos esta sencilla función para validar corrreo electrónico (con ayuda de nuestras grandes amigas: las expresiones regulares):
Funciones en jQuery
Es muy cómodo trabajar con jQuery, una vez que le pillas el cómo, pero a veces necesitas agregar algunas funciones, si usas la nomenclatura de javascript funciona perfectamente, pero tambien podemos hacerlo al modo jQuery:
Veamos un ejemplo trivial usando el siguiente elemento del DOM:
<input type=”hidden” id=”prueba” value=”Esto es una prueba” />
Definamos el codigo js para que se muestre el atributo value del elemento DOM:
//la primera forma, recibiendo el argumento
$(this)jQuery.fn.mifuncion=function()
{
alert($(this).val())
}
//la segunda forma, sin argumentos
jQuery.otrafuncion=function()
{
alert($(’#prueba’).val();
}
//como es de rigor:
$(document).ready(function()
{
//llamamos a la primera función
$(’#prueba’).mifuncion();
//llamamos a la segunda función
$.otrafuncion();
});
Ambas funciones realizan el mismo trabajo: la primera pasandole el argumento en forma de elemento DOM, y la segunda mediante una referencia directa desde la función al elemento DOM. También podemos pasar argumentos dentro los parentesis como es tradicional, esto ya depende de la naturaleza del script.
Cosas de webs
Hace un tiempo que estoy inmerso en esto de programación web, probando cosas en php, mysql, apache, javascript (jQuery), y HTML por supuesto. Siempre se van descubriendo y aprendiendo cosas, trucos, mañas e incluso artimañas, muchas veces es dificil encontrar referencias sobre un tema en particular; para todos aquellos que esten iniciandose en este mundo, pues aquí encontraran algunas cosas que es posible que puedan interesarles.
