Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

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:
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="http://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&eacute;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
0
Resp
6943
Visitas
Por alber hace 34 meses
Administrador online

Relaccionados

Para comentar Inicia sesión o Registrate