Hemalatah/Basic Login HTML page.html

## Basic Login HTML page.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>LogIn</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
</head>
<body>
<style>
	.signUp {
	  margin-left: 5%;
	  margin-top: 5%;
	}

	.signUp input {
	  width: 40%;
	  height: 25px;
	  border-radius: 5px;
	  outline: none;
	  padding-left: 10px;
	  font-size: 15px;
	  font-weight: normal; }

	.error-info ul li {
	  margin: 0;
	  padding: 0;
	  list-style-type: none; }

	.error-info {
	  position: relative;
	  right: -15px;
	  width: 35%;
	  padding: 15px;
	  color: #333;
	  background: #F8F8F8;
	  font-size: .875em; }

	.error-info h4 {
	  margin: 0 0 10px 0;
	  padding: 0;
	  font-weight: normal; }

	.valid {
	  color: #3a7d34; }

	.invalid {
	  color: #ec3f41; }

	.login-show-error {
	  display: none;
	  color: #333; }

	.login {
		width: 75px;
		background-color: #eee;
	}

	hr {
		width: 70%;
		margin-left: -30px;
	}

</style>
<form action="#" method="POST" id="form-login" class="signUp" novalidate="novalidate">
	<h2>Log In</h2>
	<hr>
	<p>
		<label for="username">Username:</label><br>
		<input id="username" type="text" name="username" required autocomplete="name" autofocus>
	</p>
	<p>
		<label for="password">Password:</label><br>
		<input id="password" type="password" name="password" required autocomplete="new-password">
	</p>
    <div class="error-info">
    	<h4>Password must meet the following requirements:</h4>
			<ul>
				<li id="length"><i class="fa fa-thumbs-down" aria-hidden="true"> Please enter atleast 8 characters</i></li>
				<li id="number"><i class="fa fa-thumbs-down" aria-hidden="true"> Please enter atleast one number</i></li>
				<li id="letter"><i class="fa fa-thumbs-down" aria-hidden="true"> Please enter atleast one letter</i></li>
				<li id="capital"><i class="fa fa-thumbs-down" aria-hidden="true"> Please enter atleast one capital letter</i></li>
			</ul>
    </div><br>
    <button class="login" type="submit">Log In</button>
</form>


</body>
<script>

	// password validation
	var l = 0,
		a = 0,
		c = 0,
		n = 0;
    $('input[type=password]').keyup(function() {
        $('.error-info').show();
        var password = $(this).val();
        if ( password.length < 8 ) {
            $('#length').removeClass('valid').addClass('invalid');
            $('#length i').removeClass('fa-thumbs-up').addClass('fa-thumbs-down');
        } else {
            $('#length').removeClass('invalid').addClass('valid');
            $('#length i').removeClass('fa-thumbs-down').addClass('fa-thumbs-up');
            l = 1;
        }
        //validate letter
        if ( password.match(/[A-z]/) ) {
            $('#letter').removeClass('invalid').addClass('valid');
            $('#letter i').removeClass('fa-thumbs-down').addClass('fa-thumbs-up');
            a = 1;

        } else {
            $('#letter').removeClass('valid').addClass('invalid');
            $('#letter i').removeClass('fa-thumbs-up').addClass('fa-thumbs-down');

        }

        //validate capital letter
        if ( password.match(/[A-Z]/) ) {
            $('#capital').removeClass('invalid').addClass('valid');
            $('#capital i').removeClass('fa-thumbs-down').addClass('fa-thumbs-up');
            c = 1;
        } else {
            $('#capital').removeClass('valid').addClass('invalid');
            $('#capital i').removeClass('fa-thumbs-up').addClass('fa-thumbs-down');
        }

        //validate number
        if (password.match(/\d/) ) {
            $('#number').removeClass('invalid').addClass('valid');
            $('#number i').removeClass('fa-thumbs-down').addClass('fa-thumbs-up');
            n = 1
        } else {
            $('#number').removeClass('valid').addClass('invalid');
            $('#number i').removeClass('fa-thumbs-up').addClass('fa-thumbs-down');
        }

    }).focus(function() {
        $('.error-info').show();
        $('.error-info').css('color', '#555');
    });

    var JQUERY4U = {};

    JQUERY4U.UTIL =  {
        setupFormValidation: function()
        {

		    //login form validation rules
		    $('#form-login').validate({
		        rules: {
		            username: {
		              required: true,
		              minlength: 6
		            },
		            password: {
		              required: true
		            }
		        },
		        messages: {
		            username: {
		              required: 'Please enter the username',
		              minlength: 'Please enter atleast 6 characters'
		            },
		            password: {
		              required: 'Please enter the password'
		            }
		        },
                submitHandler: function() {
                	if(l && a && c && n) {
                		alert("Sucessfully logged in!");
                	}
                }
		    });
		}
	};

	//when the dom has loaded setup form validation rules
    JQUERY4U.UTIL.setupFormValidation();

</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>LogIn</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
	</head>
	<body>
	<style>
	.signUp {
	margin-left: 5%;
	margin-top: 5%;
	}

	.signUp input {
	width: 40%;
	height: 25px;
	border-radius: 5px;
	outline: none;
	padding-left: 10px;
	font-size: 15px;
	font-weight: normal; }

	.error-info ul li {
	margin: 0;
	padding: 0;
	list-style-type: none; }

	.error-info {
	position: relative;
	right: -15px;
	width: 35%;
	padding: 15px;
	color: #333;
	background: #F8F8F8;
	font-size: .875em; }

	.error-info h4 {
	margin: 0 0 10px 0;
	padding: 0;
	font-weight: normal; }

	.valid {
	color: #3a7d34; }

	.invalid {
	color: #ec3f41; }

	.login-show-error {
	display: none;
	color: #333; }

	.login {
	width: 75px;
	background-color: #eee;
	}

	hr {
	width: 70%;
	margin-left: -30px;
	}

	</style>
	<form action="#" method="POST" id="form-login" class="signUp" novalidate="novalidate">
	<h2>Log In</h2>
	<hr>
	<p>
	<label for="username">Username:</label><br>
	<input id="username" type="text" name="username" required autocomplete="name" autofocus>
	</p>
	<p>
	<label for="password">Password:</label><br>
	<input id="password" type="password" name="password" required autocomplete="new-password">
	</p>
	<div class="error-info">
	<h4>Password must meet the following requirements:</h4>
	<ul>
	<li id="length"><i class="fa fa-thumbs-down" aria-hidden="true"> Please enter atleast 8 characters</i></li>
	<li id="number"><i class="fa fa-thumbs-down" aria-hidden="true"> Please enter atleast one number</i></li>
	<li id="letter"><i class="fa fa-thumbs-down" aria-hidden="true"> Please enter atleast one letter</i></li>
	<li id="capital"><i class="fa fa-thumbs-down" aria-hidden="true"> Please enter atleast one capital letter</i></li>
	</ul>
	</div><br>
	<button class="login" type="submit">Log In</button>
	</form>


	</body>
	<script>

	// password validation
	var l = 0,
	a = 0,
	c = 0,
	n = 0;
	$('input[type=password]').keyup(function() {
	$('.error-info').show();
	var password = $(this).val();
	if ( password.length < 8 ) {
	$('#length').removeClass('valid').addClass('invalid');
	$('#length i').removeClass('fa-thumbs-up').addClass('fa-thumbs-down');
	} else {
	$('#length').removeClass('invalid').addClass('valid');
	$('#length i').removeClass('fa-thumbs-down').addClass('fa-thumbs-up');
	l = 1;
	}
	//validate letter
	if ( password.match(/[A-z]/) ) {
	$('#letter').removeClass('invalid').addClass('valid');
	$('#letter i').removeClass('fa-thumbs-down').addClass('fa-thumbs-up');
	a = 1;

	} else {
	$('#letter').removeClass('valid').addClass('invalid');
	$('#letter i').removeClass('fa-thumbs-up').addClass('fa-thumbs-down');

	}

	//validate capital letter
	if ( password.match(/[A-Z]/) ) {
	$('#capital').removeClass('invalid').addClass('valid');
	$('#capital i').removeClass('fa-thumbs-down').addClass('fa-thumbs-up');
	c = 1;
	} else {
	$('#capital').removeClass('valid').addClass('invalid');
	$('#capital i').removeClass('fa-thumbs-up').addClass('fa-thumbs-down');
	}

	//validate number
	if (password.match(/\d/) ) {
	$('#number').removeClass('invalid').addClass('valid');
	$('#number i').removeClass('fa-thumbs-down').addClass('fa-thumbs-up');
	n = 1
	} else {
	$('#number').removeClass('valid').addClass('invalid');
	$('#number i').removeClass('fa-thumbs-up').addClass('fa-thumbs-down');
	}

	}).focus(function() {
	$('.error-info').show();
	$('.error-info').css('color', '#555');
	});

	var JQUERY4U = {};

	JQUERY4U.UTIL = {
	setupFormValidation: function()
	{

	//login form validation rules
	$('#form-login').validate({
	rules: {
	username: {
	required: true,
	minlength: 6
	},
	password: {
	required: true
	}
	},
	messages: {
	username: {
	required: 'Please enter the username',
	minlength: 'Please enter atleast 6 characters'
	},
	password: {
	required: 'Please enter the password'
	}
	},
	submitHandler: function() {
	if(l && a && c && n) {
	alert("Sucessfully logged in!");
	}
	}
	});
	}
	};

	//when the dom has loaded setup form validation rules
	JQUERY4U.UTIL.setupFormValidation();

	</script>
	</html>