FormValidation

function validate() {
    let submitBtn = $('#submit');
    let checkboxBtn = $('#company');
    let password = $('#password');
    let confirmPassword = $('#confirm-password');
    let username = $('#username');
    let email = $('#email');
    let companyInfo = $('#companyInfo');
    let validContainer = $('#valid');
    let allIsValid = true;
    let submitClicked = false;
    checkboxBtn.on("change", () =>
        companyInfo.css("display", checkboxBtn.is(':checked') ? 'block' : 'none'));

    // Prevent page from reloading
    submitBtn.on('click', function (ev) {
        ev.preventDefault();
        allIsValid = true;
        validateForm();
        validContainer.css("display", allIsValid ? "block" : "none");
    });

    function validateForm() {
        validateInput(username, /^[A-Za-z\d]{3,20}$/g);
        validateInput(email, /^.+?\@(.*?\.)(.*)$/g);
        if (password.val() === confirmPassword.val()
            && password.val() !== '' && confirmPassword.val() !== '') {
            validateInput(password, /^\w{5,15}$/g);
            validateInput(confirmPassword, /^\w{5,15}$/g);
        } else {
            password.removeAttr("style");
            confirmPassword.removeAttr("style");
            password.css("border-color", "red");
            confirmPassword.css("border-color", "red");
            allIsValid = false;
        }

        if (checkboxBtn.is(':checked')) {
            validateCompanyInfo();
        }
    }

    function validateCompanyInfo() {
        let companyNumContainer = $('#companyNumber');
        companyNumContainer.removeAttr("style");
        let companyNum = Number(companyNumContainer.val());
        if (companyNum >= 1000 && companyNum <= 9999) {
            companyNumContainer.css("border", "none");
        } else {
            companyNumContainer.css("border-color", "red");
            allIsValid = false;
        }
    }

    function validateInput(input, pattern) {
        input.removeAttr("style");
        if (!pattern.test(input.val())) {
            input.css("border-color", "red");
            allIsValid = false;
        } else {
            input.css("border", "none");
        }
    }
}