oriolrivera/validarFormJs.html

## validarFormJs.html
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Validar formulario con jquery</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

		<script>
			$(function(){
				$("#send").click(function(){
					if ($("#login").val()==0) {
								$("#login").focus().after('<span class="error"> Campo Usuario necesario</span>');
								return false;
					}

					if ($("#password").val()==0) {
								$("#password").focus().after('<span class="error"> Campo password necesario</span>');
								return false;
					}

					var formg = $('#form');
	                                formg.attr("action", "validacion/validar_usuario.php");
	                                formg.submit();

				});//end click

				$("#login, #password").bind('blur keyup', function(){
					if ($(this).val() != 0) {
						$('.error').fadeOut();

						return false;
					}
				});//end bind
			});
		</script>

		<style text="type/css">
			.error{


				margin-left: 16px;
				color:#fff;
				z-index: 3;
				font-size: .8em;
			        padding: 10px;
				padding-right: 35px;
				position: absolute;
				background-color: #333333;
			}


			.error:before{
			    border-color: transparent #333333 transparent transparent;
			    border-style: solid;
			    border-width: 10px 8px;
			    content: "";
			    display: block;
			    height: 0;
			    left: -15px;
			    position: absolute;
			    top: 3px;
			    width: 0;
			}
		</style>

	</head>
	<body>

		<form method="post" action="" name="form" id="form">
			<label>Usuario</label><br>
			<input type="text" class="login" id="login" name="usuario"><br>

			<label>Contraseña</label><br>
			<input type="password" class="login" id="password" name="password"><br>


			<button type="buttton" id="send">Ingresar</button>
		</form>

	</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Validar formulario con jquery</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

	<script>
	$(function(){
	$("#send").click(function(){
	if ($("#login").val()==0) {
	$("#login").focus().after('<span class="error"> Campo Usuario necesario</span>');
	return false;
	}

	if ($("#password").val()==0) {
	$("#password").focus().after('<span class="error"> Campo password necesario</span>');
	return false;
	}

	var formg = $('#form');
	formg.attr("action", "validacion/validar_usuario.php");
	formg.submit();

	});//end click

	$("#login, #password").bind('blur keyup', function(){
	if ($(this).val() != 0) {
	$('.error').fadeOut();

	return false;
	}
	});//end bind
	});
	</script>

	<style text="type/css">
	.error{


	margin-left: 16px;
	color:#fff;
	z-index: 3;
	font-size: .8em;
	padding: 10px;
	padding-right: 35px;
	position: absolute;
	background-color: #333333;
	}


	.error:before{
	border-color: transparent #333333 transparent transparent;
	border-style: solid;
	border-width: 10px 8px;
	content: "";
	display: block;
	height: 0;
	left: -15px;
	position: absolute;
	top: 3px;
	width: 0;
	}
	</style>

	</head>
	<body>

	<form method="post" action="" name="form" id="form">
	<label>Usuario</label><br>
	<input type="text" class="login" id="login" name="usuario"><br>

	<label>Contraseña</label><br>
	<input type="password" class="login" id="password" name="password"><br>


	<button type="buttton" id="send">Ingresar</button>
	</form>

	</body>
	</html>