formValidation

function validate() {
    const userNamePattern = /^[a-zA-Z0-9]{3,20}?$/;
    const passwordPattern = /^\w{5,15}?$/;
    const emailPattern = /^.*@.*\..*$/gm;

    let isCompany = false;
    let submitBtn = document.getElementById('submit');
    let validDiv = document.getElementById('valid');

    let inputCompanyCheckbox = document.getElementById('company');
    let companyFieldSet = document.getElementById('companyInfo');
    let inputCompanyNumber = document.getElementById('companyNumber');
    let inpConfirmPass = document.getElementById('confirm-password');
    let inpPass = document.getElementById('password');
    let inpEmail = document.getElementById('email');
    let inpUsername = document.getElementById('username');

    inputCompanyCheckbox.addEventListener('change', (ev) => {
        if (ev.target.checked == true) {
            companyFieldSet.style.display = 'block';
            isCompany = true;
        } else {
            companyFieldSet.style.display = 'none';
            isCompany = false;
        }
    });

    submitBtn.addEventListener('click', onClick);
    function onClick(ev) {
        ev.preventDefault();

        let allFieldsBoolean = [];

        let isValidUserName =
            userNamePattern.test(inpUsername.value) &&
            inpUsername.value.trim() !== '';
        allFieldsBoolean.push(isValidUserName);
        applyStyle(inpUsername, isValidUserName);

        let isValidEmail =
            emailPattern.test(inpEmail.value) && inpEmail.value.trim() !== '';
        allFieldsBoolean.push(isValidEmail);
        applyStyle(inpEmail, isValidEmail);

        let isValidPass =
            passwordPattern.test(inpPass.value) &&
            inpPass.value === inpConfirmPass.value &&
            inpPass.value.trim() !== '';
        allFieldsBoolean.push(isValidPass);
        applyStyle(inpPass, isValidPass);
        applyStyle(inpConfirmPass, isValidPass);

        if (isCompany) {
            let isValidCompNum =
                Number(inputCompanyNumber.value) >= 1000 &&
                Number(inputCompanyNumber.value) <= 9999;
            allFieldsBoolean.push(isValidCompNum);
            applyStyle(inputCompanyNumber, isValidCompNum);
        }

        if (allFieldsBoolean.every((el) => el === true)) {
            validDiv.style.display = 'block';
        } else {
            validDiv.style.display = 'none';
        }
    }
    function applyStyle(element, elBool) {
        if (!elBool) {
            element.style.borderColor = 'red';
        } else {
            element.style.border = 'none';
        }
    }
}