Блог

У меня возникли проблемы при попытке заполнить форму регистрации. Мне удалось создать html — код и немного js. Кто-нибудь может сказать мне, чего не хватает? Спасибо!

      <div class="modal" id="email-modal">
        <div class="modal-content">
            <span class="close-btn">amp;times;</span>
            <div class="modal-content-left">
                <img src="./img/pic1.svg" alt="" id='modal-img' >
            </div>
            <div class="modal-content-right">
                <form action="javascript:Validate(id)" method="GET" class="modal-form" id="form">
                <h1>¡Unite a nosotros hoy! Crea tu cuenta completando la información de abajo.</h1>
                <div class="form-validation">
                    <input type="text" class="modal-input" id="name" name="name" placeholder="Ingresá tu nombre">
                    <p>Error Message</p>
                </div>
                <div class="form-validation">
                    <input type="email" class="modal-input" id="email" name="email" placeholder="Ingresá tu mail">
                    <p>Error Message</p>
                </div>
                <div class="form-validation">
                    <input type="password" class="modal-input" id="password" name="password" placeholder="Ingresá tu contraseña">
                    <p>Error Message</p>
                </div>
                <div class="form-validation">
                    <input type="password" class="modal-input" id="password-confirm" name="password" placeholder="Confirmá tu contraseña">
                    <p>Error Message</p>
                </div>
                <input type="submit" class="modal-input-btn" value="Sign Up">
                <span class="modal-input-login">¿Ya tenes una cuenta? Iniciá sesión <a href="#">acá</a></span>
                </form>
            </div>
        </div>
    </div>
 

Я думаю, что это может быть как-то связано с составителями списков событий. Как » имя «в checkRequired([имя, адрес электронной почты, пароль, подтверждение пароля]), так и длина контрольного списка(имя,3,30); кажутся «устаревшими».

 //Modal Items
const modal = document.getElementById('email-modal');
const openBtn = document.getElementById('main__btn');
const closeBtn = document.getElementsByClassName('close-btn')[0];

//Click events
openBtn.addEventListener('click', () => {
    modal.style.display = 'block';
});

closeBtn.addEventListener('click', () => {
    modal.style.display = 'none';
});

window.addEventListener('click', (e) => {
    if(e.target === modal){
        modal.style.display = 'none';
    }
});

//Form Validation
const form = document.getElementById('form');
const name = document.getElementById('name');
const email = document.getElementById('email');
const password = document.getElementById('password');
const passwordConfirm = document.getElementById('password-confirm');

//Show error message
function showError(input, message){
    const formValidation = input.parentElement;
    formValidation.className = 'form-validation error';

    const errorMessage = formValidation.querySelector('p');
    errorMessage.innerText = message;
}

//Show valid message
function showValid(input){
    const formValidation = input.parentElement;
    formValidation.className = 'form-validation valid';
}

//Check required fields
function checkRequired(inputArr){
    inputArr.forEach(function(input){
        if(input.value.trim() === ''){
            showError(input,`${getFieldName(input)} is required`);
        } else{
            showValid(input);
        }
    })
}

// //Check input lenght
function checkLength(input, min, max){
    if(input.value.lenght < min){
        showError(input, `${getFieldName(input)} must be at least ${min} characters`);
    } else if (input.value.lenght > max) {
        showError(input, `${getFieldName(input)} must be less than ${max} characters`);
    } else{
        showValid(input);
    }
}

//Check passwords match
function passwordMatch(input1,input2){
    if(input1.value !== input2.value){
        showError(input2,'Passwords do not match');
    }
}

//Get fieldname
function getFieldName(input){
    return input.name.charAt(0).toUpperCase()   input.name.slice(1);
}

//Event Listeners
form.addEventListener('submit', (e) => {
    e.preventDefault();

    checkRequired([name, email, password, passwordConfirm]);
    checkLength(name,3,30);
    checkLength(password, 8, 25);
    checkLength(passwordConfirm, 8 , 25);
    passwordMatch(password, passwordConfirm);
    
})