Как сделать валидацию ника у формы?

Рейтинг: 0Ответов: 1Опубликовано: 01.07.2023

Есть следующий js код:

let input = document.getElementById('nick');

//создаем элемент, в котором будет содержаться ошибка
let elem = document.createElement('div');
elem.id = 'notify';
elem.style.display = 'none';
document.getElementById('form__item1').appendChild(elem);

function errorNick() {
    let errorNickname;
    if (!input.validity.valid && input.value != "") {
        elem.textContent   = 'Можно использовать только латинские символы, цифры, - и _ ! Длина ника от 5 до 16 символов!';
        elem.className     = 'error';
        elem.style.display = 'block';
        input.className    = 'pod';
        errorNickname = true;
    }
    else {
        errorNickname = false;
    }
    return errorNickname;
}


input.addEventListener('input', function(event){
    //Добавление подъема заголовка, если в поле есть текст
    if (input.value.length > 0) {
        input.className = 'pod';
    }
    else {
        input.className = '';
    }
    if ( 'block' === elem.style.display ) {
        input.className = 'pod';
        elem.style.display = 'none';
    }
});

Также есть второй файл, в котором я хочу сделать перенаправление на другую страницу, если ошибок нет.

function allGood() {
    if (invalidPass() && (errorNick())) {
        window.location("http://www.broadsmile.ru");
    }
}

Сейчас у меня у переменной errorNickname всегда ставится false, т.е. ошибок нет. Как мне это исправить? Вот сама форма:

 <form method="post" id="form-reg"name="reg">
                <H2>Регистрация</H2>
                <div id="form__item1" class="form__item">
                    <div id="row" class="row">
                        <ion-icon name="person-circle-outline"></ion-icon>
                            <input id="nick" name="nick" pattern="[A-Za-z0-9\-_]{5,16}" onchange="errorNick()" required>
                        <label for="">Ник:</label>
                    </div>
                </div>

                <div class="form__item">
                    <div class="row">
                        <ion-icon name="mail-outline"></ion-icon>
                        <input id="email" type="email" name="email" required>
                        <label for="">E-mail:</label>
                    </div>
                    <div id="errorEmail" class="error"></div>
                </div>

                <div class="form__item">
                    <div class="row">
                        <ion-icon name="lock-closed-outline"></ion-icon>
                        <input id="pass" type="password" name="pass" required>
                        <label for="">Пароль:</label>
                    </div>
                </div>

                <div class="form__item">
                    <div class="row">
                        <ion-icon name="lock-closed-outline"></ion-icon>
                        <input id="pass2" type="password" name="pass2" onchange="return invalidPass()" required>
                        <label for="">Подтвердите пароль:</label>
                    </div>
                    <div id="errorPass2" class="error"></div>
                </div>

                <input type="submit" value="Зарегистрироваться" class="submitBotton" onclick="return allGood()">
            </form>
javascript html
Источник: Stack Overflow на русском

Ответы

▲ -1Принят

Реализовал код с помощью глобальных переменных.

let input = document.getElementById('nick');

//создаем элемент, в котором будет содержаться ошибка
let elem = document.createElement('div');
elem.id = 'notify';
elem.style.display = 'none';
document.getElementById('form__item1').appendChild(elem);
let errorNickname = false;

document.getElementById('nick').addEventListener("invalid", function (event) {
    event.preventDefault();
    if (!input.validity.valid && input.value != "") {
        elem.textContent   = 'Можно использовать только латинские символы, цифры, - и _ ! Длина ника от 5 до 16 символов!';
        elem.className     = 'error';
        elem.style.display = 'block';
        input.className    = 'pod';
        errorNickname = true;
    }
    else {
        errorNickname = false;
    }
    return errorNickname;
});

document.getElementById('nick').addEventListener("blur", function (event) {
    event.preventDefault();
    if (!input.validity.valid && input.value != "") {
        elem.textContent   = 'Можно использовать только латинские символы, цифры, - и _ ! Длина ника от 5 до 16 символов!';
        elem.className     = 'error';
        elem.style.display = 'block';
        input.className    = 'pod';
        errorNickname = true;
    }
    else {
        input.className = '';
        errorNickname = false;
    }
    return errorNickname;
});



input.addEventListener('input', function(event){
    //Добавление подъема заголовка, если в поле есть текст
    if (input.value.length > 0) {
        input.className = 'pod';
    }
    else {
        input.className = '';
    }
    if ( 'block' === elem.style.display ) {
        input.className = 'pod';
        elem.style.display = 'none';
    }
});

А во втором файле написал следующее:

document.getElementById('form-reg').addEventListener("submit", allGood);

function allGood(event) {
    event.preventDefault();
    console.log(errorPass);
    if (errorNickname === false && errorPass === false) {
        window.location = 'http://www.broadsmile.ru';
    }
}