Eventos de jQuery: Eventos de formulario

jQuery

Eventos de jQuery

jQuery ofrece eventos de formulario que abarcan desde un submit a cuando cambia del valor de un input. Un formulario sigue siendo uno de los elementos más importantes de una página web. Esto es porque es el único medio que tienen los usuarios de proporcionar datos a un sitio. 

Evento submit

Este evento de formulario se lanza cuando una visita envía/submit un formulario. Se puede enviar los datos de un formulario clicando en el botón de envío o pulsando la tecla intro, tanto una forma como otra es abarcada por el evento. Lo más común es emplear este evento para cuando deseas validar los datos cuando el usuario los envíe. Asegurar que mete los tipos de datos correctos, los obligatorios completos… todo asegurado antes de enviar la información al servidor.

XHTML
1
2
3
4
<form id="formulario" action="">
    <label>Correo</label><input type="text" id="correo"/>
    <input type="submit" value="enviar" />
</form>

Al lado del cierre del body (importante hacerlo siempre así)

JavaScript
1
2
3
4
5
6
<script>
$("#formulario").submit(function(){
    if( $("#correo").val() == "" )
      alert("El campo correo está vacio");
});
</script>

Evento reset

En algunos formularios  puede haber un botón reset que deshace todos los cambios realizados en el formulario. Por tanto, puedes mostrar una ventana emergente a un usuario preguntándole si quiere borrar los cambios cuando pulse el botón de reset.

Al formulario le añadimos un reset

XHTML
1
<input type="reset" value="borrar" />

Y en el jQuery, vamos a preguntar si quiere borrar los datos una vez pulse el input reset

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
<script>
//Importante el parámetro event
$("#formulario").bind("reset", function(event){
//Recojo un true o un false
var respuesta = confirm("Quieres borrar los campos?");
//Si es false, evito que la acción del reset se lleve a cabo
if(!respuesta)
event.preventDefault();
});
</script>

Evento change

Este es otro de los eventos de formulario que está relacionado a aquellos inputs tipo radio, checkbox y select. Se lanza cuando una opción es cambiada.

Voy a poner de ejemplo con un input radio, añadiéndolo al formulario. No es preciso que esté dentro de un form para que funcione.

1
2
3
4
<br />
   <input type="radio" name="sexo" />Mujer
   <input type="radio" name="sexo" />Hombre
<br />

JavaScript
1
2
3
4
5
<script>
$("input[name='sexo']").change(function(){
alert("Has cambiado");
});
</script>

Evento focus

Cuando haces click o pulsas tab en un campo estas realizando un focus. Es decir, el navegador sólo se centra en el elemento que acabas de seleccionar.  Este tipo de eventos pueden servir para proporcionar ayuda a un usuario cuando su cursor esté en un input. Por ejemplo, si está en un campo donde tiene meter su número de teléfono, se puede mostrar un diálogo como «Introduce tu número en formato xxx-xxx-xxx».

XHTML
1
<label>Teléfono</label><input type="text" id="tel"/>

JavaScript
1
2
3
4
5
<script>
$("#tel").focus(function() {
$("#tel").after( "<span> Introduce tú número en formato xxx-xxx-xxx </span>" );
});
</script>

Evento blur

Es el opuesto de focus, se lanza cuando sale de un campo que está siendo focalizado. Es de utilidad cuando un usuario deja un campo incorrecto para pasar al siguiente, puedes comprobar ese instante si el campo que rellenó está correcto o no.

JavaScript
1
2
3
4
5
6
<script>
$("#correo").blur(function() {
if( $("#correo").val() == "" )
      alert("El campo correo está vacio");
});
</script>

Hay que tener en cuenta que tanto focus como blur se pueden usarse en los vínculos de un página.

Hasta aquí los eventos de formulario en jQuery, espero que os haya gustado. A seguir picando 🙂