Quitar espacios a elementos del formulario automáticamente

Trim automático a campos de formularios con Jquery

Con este (mini)código podrás quitar los espacios iniciales y finales de cualquier campo de texto o textarea en un formulario html.

Segundo post de programación en mi blog (simple, pero útil) y bueno, creo que esto podría marcar la tendencia, sobre comenzar a publicar entradas sobre validaciones de formularios.
El siguiente post, trata sobre algo que les servirá mucho a quienes estén recién comenzando a conocer las funcionalidades de jQuery. Ya, sin más, acá les dejo el ejemplo de formulario, el cual no permitirá que queden espacios sobrantes en sus campos.
A continuación les dejo la función javascript de 900 líneas...

<script type="text/javascript">
$(document).ready(function() {

//Trim automático
$("#formPrueba input[type=text], #formPrueba textarea").blur(function(){
valueInput = $.trim($(this).val());
$(this).val(valueInput);
});

});
</script>


Explicación:
De color rojo están los elementos en los que quiero aplicar la validación. En este caso serían a todos los inputs de tipo texto y textareas presentes en un formulario que tenga el id "formPrueba".
De color azul está definido el evento que activará el trim al campo. En este caso es el blur, o sea una vez que el usuario pierda el foco de algún elemento que pertenezca en el selector previamente definido (el de color rojo) se activará la función.
De color café creo una variable que obtiene el valor del campo pero quitándole los espacios iniciales o finales (trim) en caso de poseerlos.
De color celeste sobreescribo el valor actual del elemento que haya perdido el foco. El nuevo valor será el mismo pero sin espacios sobrantes.

(Click acá para ver código final)


Como ven, esto es algo simple, aunque de todas maneras pueden personalizarlo a su gusto, por ej: si por algún extraño, motivo razón o circunstancia no quieres que todos los elementos posean un trim automático, puedes darles una clase y poner esta en el selector.
Y bueno, eso sería todo por el momento... #NosBelmont.

Nota: Recuerden que antes de crear la función deben de haber llamado a la librería jQuery.



**Cualquier sugerencia o correción será bien recibida.
--Creado por @kai_alexis20--

2 comentarios:

Julio Yamá Andrade dijo...

Se ve interesante y la explicación está clara, aunque debo admitir que me he aventurado muy poco en el mundo del jQuery. Aún así gracias por la info, espero aplicarla en un futuro próximo. :)

Kai Alexis dijo...

Gracias por el comentario :). Espero subir en un futuro más cosas con jQuery de este estilo y más adelante sobre efectos o animaciones. Se puede lograr mucho con este framework.

Saludos!

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Publicar un comentario en la entrada

Si quieres usar un emoticon como los de arriba sólo escribe el símbolo que aparece al lado del que quieres.

IMPORTANTE: Por tema de tiempo, los mensajes del blog los podré responder sólo los fines de semana, aunque dependiendo del mensaje puede que sea antes.
Por lo anteriora aconsejo que si dejas un comentario esperando una respuesta te sugiero que hagas click en Suscripción por correo electrónico para saber cuando se ha respondido.

Saludos