Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
-
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Realtime Form Validation</title>
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <style>
- html,
- body {
- display: flex;
- align-items: center;
- justify-content: center;
- align-items: center;
- width: 100%;
- height: 100%;
- }
- .centered {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 50px;
- width: 40%;
- }
- input {
- width: 300px;
- }
- .container {
- margin: 80px auto;
- max-width: 800px;
- width: 90%;
- }
- .registration {
- border: 1px black solid;
- border-radius: 5px;
- background-color: #fff;
- padding-bottom: 20px;
- max-width: 600px;
- margin: 0 auto;
- }
- .input-requirements {
- list-style-position: inside;
- color: grey;
- font-style: italic;
- margin: 10px auto;
- list-style: disc;
- text-align: left;
- max-width: 400px;
- }
- input:not([type="submit"]) + .input-requirements {
- overflow: hidden;
- max-height: 0;
- transition: max-height 1s ease-out;
- }
- input:not([type="submit"]):focus + .input-requirements,
- input:not([type="submit"]):active + .input-requirements {
- max-height: 1000px;
- transition: max-height 1s ease-in;
- }
- .input-requirements li.invalid {
- color: red;
- }
- .input-requirements li.valid {
- color: green;
- }
- </style>
- </head>
- <body>
- <section class="container centered">
- <form class="registration centered" id="registration" action="#0">
- <h1> Registration Form</h1>
- <label for="username">
- Username
- </label>
- <input type="text" id="username" minlength="3" required>
- <ul for="username" class="input-requirements">
- <li> At least 3 characters long</li>
- <li> Must only contain letters and numbers (no special characters)</li>
- </ul>
- <label for="password">
- Password
- </label>
- <input type="password" id="password" maxlength="100" minlength="8" required>
- <ul for="password" class="input-requirements">
- <li> At least 8 characters long (and less than 100 characters)</li>
- <li> Contains at least 1 number</li>
- <li> Contains at least 1 lowercase letter</li>
- <li> Contains at least 1 uppercase letter</li>
- <li> Contains a special character (e.g. @ !)</li>
- </ul>
- <label for="password_repeat">
- Repeat Password
- </label>
- <input type="password" id="password_repeat" maxlength="100" minlength="8" required>
- <br>
- <input type="submit" value="Submit">
- </form>
- </section>
- <script>
- class CustomValidation {
- constructor(input) {
- this.invalidities = [];
- this.validityChecks = [];
- this.inputNode = input;
- this.registerListener();
- }
- addInvalidity(message) {
- this.invalidities.push(message);
- }
- getInvalidities() {
- return this.invalidities.join('. \n');
- }
- checkValidity(input) {
- for (let i = 0; i < this.validityChecks.length; i++) {
- const isInvalid = this.validityChecks[i].isInvalid(input);
- if (isInvalid) {
- this.addInvalidity(this.validityChecks[i].invalidityMessage);
- }
- const requirementElement = this.validityChecks[i].element;
- if (requirementElement) {
- if (isInvalid) {
- requirementElement.classList.add('invalid');
- requirementElement.classList.remove('valid');
- }
- else {
- requirementElement.classList.remove('invalid');
- requirementElement.classList.add('valid');
- }
- }
- }
- }
- checkInput() {
- this.inputNode.CustomValidation.invalidities = [];
- this.checkValidity(this.inputNode);
- if (this.inputNode.CustomValidation.invalidities.length === 0 && this.inputNode.value !== '') {
- this.inputNode.setCustomValidity('');
- }
- else {
- const message = this.inputNode.CustomValidation.getInvalidities();
- this.inputNode.setCustomValidity(message);
- }
- }
- registerListener() {
- var CustomValidation = this;
- this.inputNode.addEventListener('keyup', () => {
- CustomValidation.checkInput();
- }, false);
- }
- }
- const usernameValidityChecks = [
- {
- isInvalid(input) {
- return input.value.length < 3;
- },
- invalidityMessage: 'This input needs to be at least 3 characters',
- element: document.querySelector('ul[for="username"] li:nth-child( 1 )')
- },
- {
- isInvalid(input) {
- const illegalCharacters = input.value.match(/[^a-zA-Z0-9]/g);
- return illegalCharacters ? true : false;
- },
- invalidityMessage: 'Only letters and numbers are allowed',
- element: document.querySelector('ul[for="username"] li:nth-child( 2 )')
- }
- ];
- const passwordValidityChecks = [
- {
- isInvalid(input) {
- return input.value.length < 8 | input.value.length > 100;
- },
- invalidityMessage: 'This input needs to be between 8 and 100 characters',
- element: document.querySelector('ul[for="password"] li:nth-child( 1 )')
- },
- {
- isInvalid(input) {
- return !input.value.match(/[0-9]/g);
- },
- invalidityMessage: 'At least 1 number is required',
- element: document.querySelector('ul[for="password"] li:nth-child( 2 )')
- },
- {
- isInvalid(input) {
- return !input.value.match(/[a-z]/g);
- },
- invalidityMessage: 'At least 1 lowercase letter is required',
- element: document.querySelector('ul[for="password"] li:nth-child( 3 )')
- },
- {
- isInvalid(input) {
- return !input.value.match(/[A-Z]/g);
- },
- invalidityMessage: 'At least 1 uppercase letter is required',
- element: document.querySelector('ul[for="password"] li:nth-child( 4 )')
- },
- {
- isInvalid(input) {
- return !input.value.match(/[\!\@\#\$\%\^\&\*]/g);
- },
- invalidityMessage: 'You need one of the required special characters',
- element: document.querySelector('ul[for="password"] li:nth-child( 5 )')
- }
- ];
- const passwordRepeatValidityChecks = [{
- isInvalid() {
- return passwordRepeatInput.value != passwordInput.value;
- },
- invalidityMessage: 'This password needs to match the first one'
- }];
- const usernameInput = document.getElementById('username');
- const passwordInput = document.getElementById('password');
- const passwordRepeatInput = document.getElementById('password_repeat');
- usernameInput.CustomValidation = new CustomValidation(usernameInput);
- usernameInput.CustomValidation.validityChecks = usernameValidityChecks;
- passwordInput.CustomValidation = new CustomValidation(passwordInput);
- passwordInput.CustomValidation.validityChecks = passwordValidityChecks;
- passwordRepeatInput.CustomValidation = new CustomValidation(passwordRepeatInput);
- passwordRepeatInput.CustomValidation.validityChecks = passwordRepeatValidityChecks;
- const inputs = document.querySelectorAll('input:not( [type="submit"] )');
- const submit = document.querySelector('input[type="submit"]');
- const form = document.getElementById('registration');
- function validate() {
- for (let i = 0; i < inputs.length; i++) {
- inputs[i].CustomValidation.checkInput();
- }
- }
- submit.addEventListener('click', validate, false);
- form.addEventListener('submit', e => {
- validate();
- e.preventDefault();
- }, false);
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement