Discover Top Posts Tagged with #validando formularios jquery

Curso jQuery: Ejercicios 3

Nueva noticia publicada en https://amdisenoweb.es/curso-jquery-ejercicios-3/

Curso jQuery: Ejercicios 3

En este caso vamos a crear un formulario sencillo para validar los datos introducidos, marcaremos con un “asterisco” aquellos campos que queremos que sean obligatorios y después con jquery comprobaremos si hay algo metido en esos campos o no, si no hay nada metido mostraremos un mensaje con un dialogo de jQueryUI y si todos los campos son correctos entonces ejecutaremos la orden del formulario. También utilizaremos el método focusin y focusout para cambiar el estilo de los campos cuando pinchemos en ellos.

Para empezar crearemos nuestro formulario con un div error que sera el div que se va mostrar cuando no se haya rellenado un campo.

<form name="formu" class="formulario" action="formmail.php" method="post"> <p>Nombre<span class="asterisco">*</span>: <input type="text" class="nombre"></p> <p>Email<span class="asterisco">*</span>: <input type="text" class="email"></p> Comentarios<span class="asterisco">*</span>: <textarea class="comentarios" rows="6" cols="30"></textarea><br> <input type="button" value="enviar" class="enviar"> <span class="asterisco">* campos obligatorios</span> </form> <div class="error" title="Error rellenando datos">Mensaje de error</div>

A continuación introduciremos los estilos css para el asterisco, ocular el error y para que cuando pinchemos en un campo este cambie de formato.

A continuación añadiremos el script de jQuery y las ordenes necesarias para que cuando pinchemos en un campo este cambie de formato. Con el focusin controlamos cuando se pincha en una casilla y cambiamos su estilo y con el focusout restauramos el estilo de esa casilla

Quedando algo así:

A continuación lo que vamos a hacer es cuando pinchemos en el botón enviar que compruebe si hemos escrito algo en los campos y si es así enviarlo, sino hemos rellenado algún campo con el dialogo de jQueryUI visualizaremos un error. Lo primero sera ir a la página jQueryui.com y descargar el plugin con el tema que nos guste, una vez descargado y descomprimido añadimos los estilos css en el head de la pagina.

A continuación añadimos el jqueryui debajo del jquery.3.2.1, dejándolo asi:

Y por ultimo nos faltaría el código para la comprobación que meteremos dentro del document ready.

$(".enviar").click(function(e) var nombre=$(".nombre").val(); var email=$(".email").val(); var comentario=$(".comentarios").val(); if (nombre.length==0) mensaje("No has metido nada en nombre"); return; if(email.length==0) mensaje("No has metido un correo electronico"); return; var posarroba=email.indexOf("@"); if( posarroba<4) mensaje("Error en el correo, no tiene arroba"); return; var pospunto=email.indexOf(".",posarroba); if (pospunto<posarroba+4) mensaje("Error en el correo, no tiene punto"); return; if(email.length<pospunto+1) mensaje("Error en el correo, no esta bien formada la direccion"); return; if(comentario.length<4) mensaje("No has metido comentarios"); return; $(".formulario").submit(); ); var mensaje=function(mensa) $(".error").html(mensa); $(".error").dialog( modal: true, buttons: Ok: function() $( this ).dialog( "close" ); );

En este código lo primero que hacemos es recuperar el valor de los campos nombre, email y comentarios, si estos campos están vacíos mostramos un mensaje de error, ademas en el email comprobamos que tenga una @ y un punto, con la función indexOf, esta función devuelve -1 si no encuentra el valor que le pasamos entre comillas, además comprobamos que antes de la arroba haya 4 caracteres y entre la arroba y el punto otros cuatro.

Para que funcione el formmail.php habrá que configurarlo como lo explicamos en esta web

En este caso vamos ha realizar un formulario de comprobación diferente, usaremos el método keyup para comprobar si se ha escrito algo o no en la casilla, si el valor es correcto la marcara en verde y si no es correcto en rojo, lo haremos con las función addClass y removeClass de jQuery.

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sin título</title> <style type="text/css"> .asterisco font-size:11px; color:red; vertical-align: super; .error background-color: #F08F90; border: 2px solid #c10003; .correcto background-color: #C9F9A7; border: 2px solid #00c103; </style> </head> <body> <form name="formu" class="formulario" action="formmail.php" method="post"> <p>Nombre<span class="asterisco">*</span>: <input type="text" class="nombre"></p> <p>Email<span class="asterisco">*</span>: <input type="text" class="email"></p> Comentarios<span class="asterisco">*</span>: <textarea class="comentarios" rows="6" cols="30"></textarea><br> <input type="button" value="enviar" class="enviar"> <span class="asterisco">* campos obligatorios</span> </form> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) $(".nombre").keyup(function(e) var nombre=$(".nombre").val(); if (nombre.length==0) $(".nombre").removeClass("correcto"); $(".nombre").addClass("error"); else $(".nombre").removeClass("error"); $(".nombre").addClass("correcto"); ); $(".email").keyup(function(e) var email=$(".email").val(); var errorcorreo=false; var pospunto=0; var posarroba=0; var posespacio=0; if (email.length==0) errorcorreo=true; posarroba=email.indexOf("@"); if(posarroba<2) errorcorreo=true; pospunto=email.indexOf(".",posarroba); if(pospunto<2) errorcorreo=true; posespacio=email.indexOf(" "); if(posespacio>=0) errorcorreo=true; if (errorcorreo==true) $(".email").removeClass("correcto"); $(".email").addClass("error"); else $(".email").removeClass("error"); $(".email").addClass("correcto"); ); $(".comentarios").keyup(function(e) var comentarios=$(".comentarios").val(); if (comentarios.length==0) $(".comentarios").removeClass("correcto"); $(".comentarios").addClass("error"); else $(".comentarios").removeClass("error"); $(".comentarios").addClass("correcto"); ); ); </script> </body> </html>

#curso jquery #formularios jquery #jquery #validando formularios jquery