Validar campos input de formulario con jquery
En el siguiente ejemplo vemos como validar los campos o los inputs de un formulario utilizando jquery, lo que haremos es mostrar un mensaje en verde cuando el campo este completado es decir no este vacío, de lo contrario mostraremos el mensaje por defecto:
La función es muy sencilla, la podéis modificar a vuestro gusto:
La función es muy sencilla, la podéis modificar a vuestro gusto:
function validar(){ //Almacenamos los valores nombre=$('#nombre').val(); correo=$('#correo').val(); telefono=$('#telefono').val(); //Comprobamos y mostramos diferentes clases if (nombre==''){ $('#respuesta_nombre').removeClass().addClass('inicio'); } else { $('#respuesta_nombre').removeClass().addClass('ok'); } if (correo==''){ $('#respuesta_correo').removeClass().addClass('inicio'); } else { $('#respuesta_correo').removeClass().addClass('ok'); } if (telefono==''){ $('#respuesta_telefono').removeClass().addClass('inicio'); } else { $('#respuesta_telefono').removeClass().addClass('ok'); } //Si no hay ningun campo vacio enviamos el formulario if (nombre=='' || correo=='' || telefono==''){ return false; } else return true; }Ejemplo completo solo copia y pega:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> function validar(){ //Almacenamos los valores nombre=$('#nombre').val(); correo=$('#correo').val(); telefono=$('#telefono').val(); //Comprobamos y mostramos diferentes clases if (nombre==''){ $('#respuesta_nombre').removeClass().addClass('inicio'); } else { $('#respuesta_nombre').removeClass().addClass('ok'); } if (correo==''){ $('#respuesta_correo').removeClass().addClass('inicio'); } else { $('#respuesta_correo').removeClass().addClass('ok'); } if (telefono==''){ $('#respuesta_telefono').removeClass().addClass('inicio'); } else { $('#respuesta_telefono').removeClass().addClass('ok'); } //Si no hay ningun campo vacio enviamos el formulario if (nombre=='' || correo=='' || telefono==''){ return false; } else return true; } </script> <form method="post" action="https://datoweb.com" onSubmit="return validar();" id="formjquery"> <input type="text" name="nombre" id="nombre" value="" onBlur="validar();" autofocus> <span class="inicio" id="respuesta_nombre">Introduce tu nombre</span> <br> <input type="text" name="correo" id="correo" value="" onBlur="validar();"> <span class="inicio" id="respuesta_correo">Introduce tu email</span> <br> <input type="text" name="telefono" id="telefono" value="" onBlur="validar();"> <span class="inicio" id="respuesta_telefono">Introduce tu teléfono</span> <br> <input type="submit" id="btn_send" value="Enviar" onClick="validar();" style="margin-left: 127px; padding: 4px 8px"> <br> </form> <style> #formjquery { font-family: 'Open Sans', sans-serif; } input { margin:4px; padding:4px; } .inicio { color: rgb(55, 55, 55); background: #EFEFEF; border: 1px solid rgb(199, 199, 199); padding: 4px 8px; border-radius: 3px; } .ok { color: rgb(9, 97, 20); background: #B3FFBA; border: 1px solid rgb(42, 155, 18); padding: 4px 8px; border-radius: 3px; } </style>Demo
5
Puntos
Puntos
16496
Visitas
Visitas
0
Resp
Resp
Por alber hace 108 meses
Administrador