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.
<style type="text/css">
.asterisco{
font-size:11px;
color:red;
vertical-align: super;
}
.seleccionado{
background-color: #AEF8A0;
padding:5px;
-webkit-box-shadow: 0px 0px 4px 2px #24a5db;
box-shadow: 0px 0px 4px 2px #24a5db;
}
.error{
display:none;
}
</style>
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
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
$(".nombre").focusin(function(e){
$(".nombre").addClass("seleccionado");
});
$(".nombre").focusout(function(e){
$(".nombre").removeClass("seleccionado");
});
$(".email").focusin(function(e){
$(".email").addClass("seleccionado");
});
$(".email").focusout(function(e){
$(".email").removeClass("seleccionado");
});
$(".comentarios").focusin(function(e){
$(".comentarios").addClass("seleccionado");
});
$(".comentarios").focusout(function(e){
$(".comentarios").removeClass("seleccionado");
});
});
</script>
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.
<link href="css/jquery-ui.min.css" rel="stylesheet" type="text/css"> <link href="css/jquery-ui.theme.min.css" rel="stylesheet" type="text/css">
A continuación añadimos el jqueryui debajo del jquery.3.2.1, dejándolo asi:
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script>
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>
