Skip to content

Instantly share code, notes, and snippets.

@johnnyfreeman

johnnyfreeman/index.css

Created January 31, 2017 21:16
Show Gist options
  • Save johnnyfreeman/113ef1da430fef70da69c9a75aa21884 to your computer and use it in GitHub Desktop.
Save johnnyfreeman/113ef1da430fef70da69c9a75aa21884 to your computer and use it in GitHub Desktop.
Download ZIP
Password Requirements Example
Raw
index.css
body {
background-color: #7ac44d;
/* IE9, iOS 3.2+ */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxyYWRpYWxHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN4PSIwJSIgY3k9IjEwMCUiIHI9IjE0MS40MjEzNTYyMzczMDk1JSI+PHN0b3Agc3RvcC1jb2xvcj0iI2YzZWYxNSIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMDA5ODg1IiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==);
/* Android 2.3- hack (needed for the actual radial gradient) */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxyYWRpYWxHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN4PSIwJSIgY3k9IjEwMCUiIHI9IjE0MS40MjEzNTYyMzczMDk1JSI+PHN0b3Agc3RvcC1jb2xvcj0iI2YzZWYxNSIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMDA5ODg1IiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==),
-webkit-gradient(radial, left bottom, 0, left bottom, 723,color-stop(0, rgb(243, 239, 21)),color-stop(1, rgb(0, 152, 133)));
/* Android 2.3 */
background-image: -webkit-radial-gradient(left bottom, ellipse farthest-corner,rgb(243, 239, 21) 0%,rgb(0, 152, 133) 100%);
/* IE10+ */
background-image: radial-gradient(ellipse farthest-corner at left bottom,rgb(243, 239, 21) 0%,rgb(0, 152, 133) 100%);
background-image: -ms-radial-gradient(left bottom, ellipse farthest-corner,rgb(243, 239, 21) 0%,rgb(0, 152, 133) 100%);
/* IE8- CSS hack */
@media \0screen\,screen\9 {
.gradient {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff3ef15",endColorstr="#ff009885",GradientType=0);
}
}
}
div.newForm {
text-align: center;
margin: 0 auto;
}
ul.requirements {
list-style: none;
}
.failed {
color: red;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Password Log-In Page</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="newForm">
<form action="" name="Form1" onsubmit="return isFormValid(this)">
<label>Username: <input type="text" name="username" onkeyup="isUsernameValid(this)"></label><br>
<label>Password: <input type="password" name="password" onkeyup="isPasswordValid(this)"></label><br>
<input type="submit" value="Submit">
<br><br>
Requirements: <br>
<ul class="requirements">
<li id="requirement1">* Username cannot be blank</li>
<li id="requirement2">* Password at least 8 characters</li>
<li id="requirement3">* Password at least 1 upper case (A-Z)</li>
<li id="requirement4">* Password at least 1 lower case (a-z)</li>
<li id="requirement5">* Password at least 1 number (0-9)</li>
<li id="requirement6">* Password at least 1 special character (~!@#$%)</li>
</ul>
</form>
</div>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
/**
* Since traversing the DOM is a very expensive operation,
* it's best practice to only do it once and store as a
* reference in a variable
*/
let requirement1 = document.getElementById('requirement1');
let requirement2 = document.getElementById('requirement2');
let requirement3 = document.getElementById('requirement3');
let requirement4 = document.getElementById('requirement4');
let requirement5 = document.getElementById('requirement5');
let requirement6 = document.getElementById('requirement6');
/**
* Determines whether or not the entire form is valid.
*
* @param {Object} form The Form element to be validated.
* @return {Boolean} True if valid, false if not.
*/
function isFormValid(form) {
if (!isUsernameValid(form.username) || !isPasswordValid(form.password)) {
return false;
}
return true;
};
/**
* Determines if the Username field is valid
*
* @param {Object} field The field to be validated.
* @return {Boolean} True if valid, false if not.
*/
function isUsernameValid(field) {
let isValid = true;
if (field.value == "") {
requirement1.classList.add('failed');
field.focus();
isValid = false;
} else {
requirement1.classList.remove('failed');
}
return isValid;
}
/**
* Determine if the Password field is valid
*
* @param {Object} field The field to be validated.
* @return {Boolean} True if valid, false if not.
*/
function isPasswordValid(field) {
let isValid = true;
if (field.value.length < 8) {
requirement2.classList.add('failed');
field.focus();
isValid = false;
} else {
requirement2.classList.remove('failed');
}
let upperCase = /[A-Z]/;
if (!upperCase.test(field.value)) {
requirement3.classList.add('failed');
field.focus();
isValid = false;
} else {
requirement3.classList.remove('failed');
}
let lowerCase = /[a-z]/;
if (!lowerCase.test(field.value)) {
requirement4.classList.add('failed');
field.focus();
isValid = false;
} else {
requirement4.classList.remove('failed');
}
let number = /[0-9]/;
if (!number.test(field.value)) {
requirement5.classList.add('failed');
field.focus();
isValid = false;
} else {
requirement5.classList.remove('failed');
}
let specialCharacter = /[\ -\/\:-\@\[-\`\{-\~]/;
if (!specialCharacter.test(field.value)) {
requirement6.classList.add('failed');
field.focus();
isValid = false;
} else {
requirement6.classList.remove('failed');
}
return isValid;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment