validatorTask

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

            <label for="number">
                Phone number
            </label>
            <input type="text" id="number" maxlength="12" minlength="12" required>

            <ul for="number" class="input-requirements">
                <li>" + " in the beginning</li>
                <li> 12 characters long </li>
                <li> just numbers</li>
                <li> Contains a special character (e.g. (),-)</li>
            </ul>

            <!--
                        <label for="email">
                        Email address
                    </label>
                        <input type="text" id="email"  minlength="10" required>

                        <ul for="number" class="input-requirements">
                            <li>" + " in the beginning</li>
                            <li> 12 characters long </li>
                            <li> just numbers</li>
                            <li> Contains a special character (e.g. (),-)</li>
                        </ul>
            -->
            <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 numberValidityChecks = [
            {
                isInvalid( input )
                {
                    return !input.value.match( /^\+/g );
                },
                invalidityMessage: 'This input needs " + " in the beginning',
                element: document.querySelector( 'ul[for="number"] li:nth-child( 1 )' )
            },
            {
                isInvalid( input )
                {
                    return input.value.length !=12;
                },
                invalidityMessage: 'This input needs 12 numbers',
                element: document.querySelector( 'ul[for="number"] li:nth-child( 2)' )
            },
            {
                isInvalid( input )
                {
                    return !input.value.match( /[0-9]+/g );
                },
                invalidityMessage: 'Just numbers. ',
                element: document.querySelector( 'ul[for="number"] li:nth-child( 3 )' )
            },
            {
                isInvalid( input )
                {
                    return input.value.match( /[\!\@\#\$\%\^\&\*]/g );
                },
                invalidityMessage: 'could be just "()" and "-"',
                element: document.querySelector( 'ul[for="number"] li:nth-child( 4 )' )
            }
        ];

        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' );
        const numberInput = document.getElementById( 'number' );


        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;

        numberInput.CustomValidation = new CustomValidation( numberInput );
        numberInput.CustomValidation.validityChecks = numberValidityChecks;


        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>