validator


<!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">

    <!--<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/formhack.css">-->
    <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 >