Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Validation</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"
            integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
            crossorigin="anonymous"></script>
</head>
<body>
<div id="wrapper">
    <form id="registerForm">
        <fieldset id="userInfo">
            <legend>User Information:</legend>
            <div class="pairContainer">
                <label for="username">Userame:</label>
                <input id="username" type="text">
            </div>
            <div class="pairContainer">
                <label for="email">Email:</label>
                <input id="email" type="text">
            </div>
            <div class="pairContainer">
                <label for="password">Password:</label>
                <input id="password" type="password">
            </div>
            <div class="pairContainer">
                <label for="confirm-password">Confirm Password:</label>
                <input id="confirm-password" type="password">
            </div>
            <div class="pairContainer">
                <label for="company">Is Company?</label>
                <input id="company" type="checkbox">
            </div>
        </fieldset>
        <fieldset id="companyInfo" style="display: none;">
            <legend>Company Informaion:</legend>
            <div class="pairContainer">
                <label for="companyNumber">Company Number</label>
                <input id="companyNumber" type="number">
            </div>
        </fieldset>
        <button id="submit">Submit</button>
    </form>
    <div id="valid" style="display: none">Valid</div>
</div>
<script src="formValidation.js"></script>
<script>
    window.onload = function () {
        validate();
    };

    function validate() {
        function colorizeIncorrect(element) {
            element.css("border-color", "red");
        }

        let usernameRegex = new RegExp('([A-Za-z0-9]){3,20}', 'g');
        let passwordRegex = new RegExp('([A-Za-z0-9_]){5,15}', 'g');
        let emailRegex = new RegExp('(.*@[^@].*\.{1}.*)', 'g');

//        let isCompanyChecked = $('#company:checkbox:checked').length == 1;
        $('#company:checkbox').click(function () {
            if ($(this).is(':checked')) {
                this.checked = true;
                $("#companyInfo").css("display", "block");
            }
            else $("#companyInfo").css("display", "none");
        });

        $('#submit').on("click", function (ev) {
            ev.preventDefault();

            let username = $('#username');
            let email = $('#email');
            let password = $('#password');
            let confirmPass = $('#confirm-password');

            function validateUsername() {
                return usernameRegex.test(username.val());
            }

            function validateEmail() {
                return emailRegex.test(email.val())
            }

            function validatePassword() {
                return passwordRegex.test(password.val());
            }

            function validateCompanyNumber() {
                return Number($("#companyNumber").val()) >= 1000 && Number($("#companyNumber").val()) <= 9999;
            }

            let isAllValid = validateUsername() && validateEmail() && validatePassword();


            if ($('#company:checkbox').is(':checked')) {
                isAllValid = isAllValid && validateCompanyNumber()
            }

            //if every single validation is correct
            if (isAllValid) {
                $('#valid').css("display", "inline-block");
            }
            else {
                $('#valid').css("display", "none");
                if (validateUsername() == false) {
                    colorizeIncorrect(username);
                }
                if (validateEmail() == false) {
                    colorizeIncorrect(email);
                }
                if (validatePassword() == false) {
                    colorizeIncorrect(password);
                    colorizeIncorrect(confirmPass);
                }
                if ($('#company:checkbox').is(':checked') && validateCompanyNumber() == false) {
                    colorizeIncorrect($("#companyNumber"));
                }
            }
        })
    }
</script>
</body>
</html>