Loading...
StoyanDimitrov0016 avatar StoyanDimitrov0016 5 Точки

07. Form Validation от Exercise: Unit Testing and Error Handling

Здравейте, на тази задача получавам 88/100 точни, като не ми минава предпоследният тест.
Линк към решението ми: [ https://pastebin.com/wgDc2fmj ]

Ще се радвам някой да може да ми помогне, защото я дебъгвам от няколко часа. Според мен грешката трябва да е някъде при валидацията на паролите, но кой знае.

*редактирах линка, защото го бях объркал

Тагове:
0
JavaScript Advanced 24/05/2023 23:26:45
Axiomatik avatar Axiomatik 2422 Точки

Demo code, ;-)

function validate() {
    // TODO
    let submitBtn = document.getElementById('submit');
    let companyCheckBox = document.getElementById('company');
    // let submitBtn = document.querySelector('form#submit');
    submitBtn.addEventListener('click', validateForm);
    companyCheckBox.addEventListener('change', companyHandler);

    function validateForm(ev) {
        ev.preventDefault();
        let usernameInput = document.getElementById('username');
        let usernameRegex = /^[A-Za-z0-9]{3,20}$/;
        // ^ and $ required since whole string must be correspond to regex
        // and not just some part of the string
        let usernameIsValid = usernameRegex.test(usernameInput.value);
        setBorder(usernameInput, usernameIsValid);

        let emailInput = document.getElementById('email');
        let emailRegex = /^.*@.*\..*$/;
        let emailIsValid = emailRegex.test(emailInput.value);
        setBorder(emailInput, emailIsValid);

        let passwordInput = document.getElementById('password');
        let confirmPasswordInput = document.getElementById('confirm-password');
        let passwordRegex = /^\w{5,15}$/;
        // let passwordRegex = /[_A-Za-z0-9]{5,15}/;
        let passwordIsValid = passwordRegex.test(passwordInput.value);
        let confirmPasswordIsValid = passwordRegex.test(confirmPasswordInput.value);
        // && passwordInput.value === confirmPasswordInput.value;
        let passwordsAreOk = passwordIsValid
            && confirmPasswordIsValid
            && passwordInput.value === confirmPasswordInput.value;
        // let passwordsAreOkAlternative = passwordIsValid
        //     && passwordInput.value === confirmPasswordInput.value;

        setBorder(passwordInput, passwordsAreOk);
        setBorder(confirmPasswordInput, passwordsAreOk);

        // better to declare CompanyCheckbox inside of function in order to avoid
        // dependancy of closure on outside elements
        let companyNumberIsValid = false;
        let companyCheckBox = document.getElementById('company');
        if (companyCheckBox.checked) {
            let companyNumberInput = document.getElementById('companyNumber');
            // let companyNumberIsValid = false;
            // trim in order to avoid empty string, since will return 0 when validated with Number
            if (companyNumberInput.value.trim() !== ''
                && !isNaN(companyNumberInput.value)) {
                let companyNumber = Number(companyNumberInput.value);
                if (companyNumber >= 1000 && companyNumber <= 9999) {
                    companyNumberIsValid = true;
                }
            }

            setBorder(companyNumberInput, companyNumberIsValid);
        }

        let validDiv = document.getElementById('valid');
        let mainFieldsValid = usernameIsValid
            && emailIsValid
            && passwordsAreOk;
        // && companyNumberIsValid;
        let companyInfoIsValid = !companyCheckBox.checked
            || (companyCheckBox.checked && companyNumberIsValid);

        let allFieldsValid = mainFieldsValid && companyInfoIsValid;
        validDiv.style.display = allFieldsValid ? 'block' : 'none';
    }

    function companyHandler(ev) {
        let companyInfoFieldSet = document.getElementById('companyInfo');

        companyInfoFieldSet.style.display = ev.target.checked
            ? 'block'
            : 'none';
    }

    function setBorder(element, isValid) {
        // element.style.borderColor = 
        if (isValid) {
            element.style.setProperty('border', 'none');
        } else {
            element.style.setProperty('border', '2px solid red');
            // printing out border color
            // console.log(element.style.getPropertyValue('border-color'));
            // console.log(element.style.getPropertyValue('border'));
        }
    }
}

 

1
icowwww avatar icowwww 2813 Точки

here

let usernameRegex = /^[A-Za-z0-9]{3,20}$/

0
25/05/2023 23:39:32
icowwww avatar icowwww 2813 Точки

Здравей,

Много малка грешка- при валидацията на username в регекса използваш /w, което означава букви, цифри и долни черти.

По условие обаче не трябва да приема долна черта. Промени го както от горния пример на /^[A-Za-z0-9]{3,20}$/

1
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.