Skip to main content
Javascript

Funciones jQuery para validar y enviar por Ajax

Por 30 enero, 20176 Comentarios
Validar formularios con jQuery

Hoy en día puedes encontrar muchos plugins tanto de jQuery como de otras librerías Javascript que te facilitan el trabajo a la hora de programar por ejemplo la validación de un formulario.

Uno de los más conocidos es el plugin Validation de jQuery. Pero tienen un problema. Para que funcionen tienes que enlazar el archivo del plugin a parte de la librería correspondiente lo que puede producir una reducción en la velocidad de carga y necesidad de más recursos para que funcione. Es verdad que puedes desplazar todos tus scripts al final de la página para que no afecte la carga inicial. Además puedes valorar la carga asíncrona, si esta no afecta al funcionamiento de la página. Pero el objetivo de este post es simplificarlo aún más utilizando solo un par de funciones que podras añadir en tu js de funciones o en la propia página donde utilices el formulario. Solo necesitas la librería de jQuery. Así reduces el número de archivos externos que tiene que leer el navegador para que funcione correctamente tu web. Y también te permitira modificarla a tu gusto y reutilizarlo en futuros proyectos. Ya sabes que una buena practica en programación es la reutilización de código y estas funciones te lo permitirán. Sobre todo si tienes varios formularios en tu plataforma online. Pero lejos de querer aburrirte más lo mejor es que veamos primero el codigo y luego lo expliquemos:

function validarForm(idForm) {
	var exprTel = /^([0-9]+){9}$/;
	var exprEmail = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
	//Validamos cualquier input con la clase 'require'
	if( $(idForm + " input.require").val() == "" )
	{
		alert("Alguno de los campos son obligatorios");
		return false;
	}
	//Comprobamos si existe input de tipo tel con la clase 'require y validamos su formato
	else if( $(idForm + " input[type='tel'].require").length && !exprTel.test($(idForm + " input[type='tel'].require").val()) ){
		alert("El teléfono no es válido");
		return false;
	}
	//Comprobamos si existe input de tipo email con la clase 'require y validamos su formato
	else if( $(idForm + " input[type='email'].require").length && !exprEmail.test($(idForm + " input[type='email'].require").val()) ){
		alert("El email no es válido");
		return false;
	}
	//Comprobamos si existe input de tipo checkbox con la clase 'require y validamos si esta marcado
	else if( $(idForm + " input[type='checkbox'].require").length && !$(idForm + " input[type='checkbox'].require").prop("checked") ){
		alert("Marca el check porfavor");
		return false;
	}
	//Devuelve true si todo está correcto
	else {
		return true;
	}
}
function envioAjax(url,idForm,method,capa) {
	event.preventDefault();
	var selectorjQform = "#" + idForm;
	var validado = validarForm(selectorjQform);
	if(validado) {
		$.ajax({
			url: url,
			method: method,
			data: $(selectorjQform).serialize(),
			dataType: 'html',
			error: function(jqXHR,textStatus,strError){
				alert("Error de conexión. Por favor, vuelva a intentarlo");
			},
			success: function(data){
				if(data) {
					if($(capa).length){
						$(capa).show();
						document.getElementById(idForm).reset();
					} else {
						alert("Datos enviados");
						document.getElementById(idForm).reset();
					}
				}
				else {
					alert("Error inesperado. Por favor, vuelva a intentarlo");
				}
			}
		});
	}
}

La primera función, validarForm(), es llamada dentro de la segunda función, y solo recibe como parametro el id del formulario. Si nos damos cuenta, antes de pasar el id como parametro lo convertimos en un selector de id de css ya que para llamarlo con jQuery necesitamos llamarlo así. El funcionamiento de la función es muy sencilla. Primero comprueba si en el formulario que le hemos pasado existe algún input con la clase «require» que esté vacío. En ese caso muestra un alert. Aquí podemos modificar el mensaje a nuestro gusto, incluso cambiar como mostrar el mensaje de error. Despues comprueba si en el formulario hay inputs de tipo «tel» con la clase «require» y en caso afirmativo valida si es un formato correcto de teléfono. En tercer lugar hace lo mismo con los campos email y por último comprueba si hay checkbox con la clase «require» que no esten marcados. Si no es ninguno de los casos la función devuelve true. La segunda función, envioAjax() recibe 4 parametros; la url donde pasaremos las variables, el id del formulario, el metodo de envio (GET o POST) y el elemento donde queremos mostrar el mensaje de respuesta en caso afirmativo. Podemos pasar el nombre del elemento, la clase o el id, siempre en formato de css. Si no pasamos ningun elemento lo mostrará en un alert. Una vez valide el form con la primera función, hace el envio por Ajax. Como ves, solo necesitas añadir las funciones a tu js y las podras utilizar para cualquier formulario. Lo unico que tienes que incluir es la clase require en los input que sean obligatorios. Os dejo un ejemplo de un formulario que utiliza estas funciones:

<form id="formularioContacto" method="post" action="javascript:void(0)">
	<label for="nombre">Nombre *</label>
	<input type="text" name="nombre" class="require" placeholder="Escribe tu nombre"/>
	<label for="telefono">Teléfono *</label>
	<input type="tel" name="telefono" class="require" maxlen="9" placeholder="Escribe tu teléfono"/>
	<label for="email">Email *</label>
	<input type="email" name="email" class="require" placeholder="ejemplo@gmail.com"/>
	<label for="asunto">Asunto</label>
	<input type="text" name="asunto" placeholder="Escribe tu asunto"/>
	<label for="check">
	<input type="checkbox" name="check" class="require"/> Acepta los terminos de Privacidad
	</label>
	<input type="submit" onclick="envioAjax('envio.php','formularioContacto','post','.resultado')" value="Enviar"/>
</form>
<p class="Resultado">¡Datos enviados!</p>
Jairo Calero

Jairo Calero

Desarrollador web frontend y backend, especialista en webs app desarrolladas en PHP y Javascript. Experto en HTML, CSS3, PHP y Javascript con frameworks y librerías como jQuery, Angular y Bootstrap. Gestor de herramientas SEO como Google Analytics, Search Console, SEMrush o Hotjar. Email marketing y Big data.

6 Comentarios

  • Actually when someone doesn’t know after that its up to other viewers that they will assist, so here it happens.

  • What’s up to every one, because I am truly eager of reading this weblog’s post to be updated on a regular basis. It consists of fastidious stuff.|

  • Erika malaschinches dice:

    Jairo Calero
    programador web famoso en el mundo entero
    tan pronto te hace una web como un armario para el trastero
    pero ojo! que te pela el monedero

  • mouth dice:

    I truly love your blog.. Excellent colors & theme.
    Did you create this website yourself? Please reply
    back as I’m looking to create my very own blog and would love to learn where
    you got this from or just what the theme is named.
    Many thanks!

  • tinyurl.com dice:

    Hello! This is kind of off topic but I need some guidance from an established blog.

    Is it tough to set up your own blog? I’m not very techincal but I can figure things out pretty fast.
    I’m thinking about setting up my own but I’m not sure where to begin. Do you have any points or suggestions?

    Appreciate it

Deja tu respuesta