Skip to content

Instantly share code, notes, and snippets.

@harrisonmalone

harrisonmalone/register.html

Last active June 1, 2019 02:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save harrisonmalone/4bc683904f342a2c9f7840e40e822735 to your computer and use it in GitHub Desktop.
Save harrisonmalone/4bc683904f342a2c9f7840e40e822735 to your computer and use it in GitHub Desktop.
Download ZIP
form validation challenge solutions for m0119
Raw
register.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Coder Academy - Register Account</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
</head>
<body>
<div class="container">
<form id="registration-form" novalidate>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control my-inputs" id="username" placeholder="John-Smith" autofocus>
<div class="invalid-feedback">
Username is required and must be at least three characters long.
</div>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control my-inputs" id="email" placeholder="john.smith@example.com">
<div class="invalid-feedback">
Please provide a valid email address.
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control my-inputs" id="password" placeholder="password123">
<div class="invalid-feedback">
Password must be at least six characters long and contain at least one special character.
</div>
</div>
<div class="form-group">
<label for="confirmpassword">Confirm password</label>
<input type="password" class="form-control my-inputs" id="confirmpassword" placeholder="password123">
<div class="invalid-feedback">
Passwords must match.
</div>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input my-inputs" id="agree">
<label class="form-check-label" for="agree">I agree to all terms and conditions</label>
<div class="invalid-feedback">
Please agree to the terms and conditions.
</div>
</div>
<button type="submit" class="btn btn-danger btn-lg btn-block" id="submit" disabled>Create Account</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="register.js"></script>
</body>
</html>
Raw
register.js
const inputs = document.querySelectorAll('.my-inputs');
inputs.forEach((input) => {
let eventType = "blur";
if (input.type == "checkbox") {
eventType = "change";
}
input.addEventListener(eventType, () => {
validateForm()
})
})
const validateUsername = () => {
const username = document.querySelector('#username');
if (username.value.length < 3) {
username.classList.remove('is-valid');
username.classList.add('is-invalid');
} else {
username.classList.remove('is-invalid');
username.classList.add('is-valid');
}
}
const validateEmail = () => {
const email = document.querySelector('#email');
// console.log(email.value)
const expression = /(?!.*\.{2})^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
const isValid = expression.test(email.value);
// console.log(isValid)
if (isValid) {
email.classList.remove('is-invalid');
email.classList.add('is-valid');
} else {
email.classList.remove('is-valid');
email.classList.add('is-invalid');
}
}
const validatePasswords = () => {
const password = document.querySelector("#password");
const valPassword = document.querySelector('#confirmpassword')
const expression = /(?=.[!@#\$%\^&])/;
const validPass = expression.test(password.value);
if(password.value === valPassword.value && password.value.length > 6 && valPassword.value.length > 6 && validPass) {
password.classList.remove('is-invalid');
password.classList.add('is-valid');
} else {
password.classList.remove('is-valid');
password.classList.add('is-invalid');
}
}
const isFormValid = () => {
const invalidFields = document.querySelector('.is-invalid');
const button = document.querySelector('#submit');
if (invalidFields === null) {
button.removeAttribute('disabled');
} else {
button.setAttribute('disabled', "");
}
}
const hasAgreed = () => {
const agreeQuery = document.querySelector("#agree");
console.log(agreeQuery);
if (agreeQuery.checked) {
agreeQuery.classList.remove('is-invalid');
agreeQuery.classList.add('is-valid');
} else {
agreeQuery.classList.remove('is-valid');
agreeQuery.classList.add('is-invalid');
}
};
const validateForm = () => {
validateUsername()
validateEmail()
validatePasswords()
hasAgreed()
isFormValid()
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment