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="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&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
16496
Visitas
0
Resp
Por alber hace 108 meses
Administrador
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate