function validate() {
    //
    let usernameBox = $('#username');
    let emailBox = $('#email');
    let passwordBox = $('#password');
    let confirmPasswordBox = $('#confirm-password');
    let companyCheckbox = $('#company');
    let companyInfo = $('#companyInfo');
    let companyBox = $('#companyNumber');
    let submitButton = $('#submit');
    let validationForm = $('#valid');

    //check
    companyCheckbox.on('change', hideShow);

    function hideShow() {
        if (companyCheckbox.is(':checked')) {
            companyInfo.css('display', 'block');
        } else {
            companyInfo.css('display', 'none')
        }
    }

    //submit
    submitButton.on('click', submit);

    function submit(event) {
        event.preventDefault();

        let areValid = true;
        validateForms();

        //company
        if (companyCheckbox.is(':checked')) {
            validateCompany();

            function validateCompany() {
                if (1000 <= +companyBox.val() && +companyBox.val() <= 9999) {
                    companyBox.css('border', 'none');
                } else {
                    companyBox.css('border', 'solid red');
                    areValid = false;
                }
            }
        }

        //valid
        if (areValid) {
            validationForm.css('display', 'block');
        } else {
            validationForm.css('display', 'none');
        }

        function validateForms() {
            let patternUser = /^[A-Za-z0-9]{3,20}$/;
            let patternEmail = /^.+@.+(\..+)+$/;
            let patternPassword = /^\w{5,15}$/;

            test(patternUser, usernameBox);
            test(patternEmail, emailBox);
            if (passwordBox.val() === confirmPasswordBox.val()) {
                test(patternPassword, passwordBox);
                test(patternPassword, confirmPasswordBox);
            } else {
                passwordBox.css('border', 'solid red');
                confirmPasswordBox.css('border', 'solid red');
                areValid = false;
            }

            function test(pattern, box) {
                let isValid = pattern.test(box.val());

                if (!isValid) {
                    box.css('border', 'solid red');
                    areValid = false;
                } else {
                    box.css('border', 'none');
                }
            }
        }
    }
}