Не работает валидация checkbox на js

Question

подскажите как исправить проблему с Валидацией, checkbox'а Прикладываю код: Код выложил полностью так-как мог не заметить ошибки: Результат должен быть такой что бы checkbox подсвечивался красным цветом, т.е outline Ну или как имя и email. Вроде бы все указал

"use strict"

document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('form');
    form.addEventListener('submit', formSend);

    async function formSend(e) {
        e.preventDefault();

        const error = formValidate(form);

        if (error === 0) {

        } else{
            alert('Заполните обязательные поля');
        }

    }


    function formValidate(form) {
        let error = 0;
        let formReq = document.querySelectorAll('._zxc');

        for (let index = 0; index < formReq.length; index++) {
            const input = formReq[index];
            formRemoveError(input);

            if (input.classList.contains('_email')) {
                if (emailTest(input)) {
                    formAddError(input);
                    error++;
                }
            } else if (input.getAttribute("type") === 'checkbox' && input.checkbox === false) {
                formAddError(input)
                error++;
            } else {
                if (input.value === '') {
                    formAddError(input);
                    error++;
                }
            }
        }
        return error;
    }

    function formAddError(input) {
        input.parentElement.classList.add('_error');
        input.classList.add('_error');
    }

    function formRemoveError(input) {
        input.parentElement.classList.remove('_error');
        input.classList.remove('_error');
    }

    //Функция проверки E-mail
    function emailTest(input) {
        const re = /^\w+([\.-]?\w+)*@(\w+[\.-]?\w+)*(\.\w{2,8})+$/
        return !re.test(input.value);
    }

        
});

body{
    background-color: grey;
}

.form {
    max-width: 550px;
    margin: 0 auto;
    color: black;
    padding: 30px 0px;
    
}

.form {
    outline: none;
}


.form__title {
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 30px 0;
}

.form__item {
    margin: 0 0 20px 0;
}

.form__label {
    font-size: 18px;
    display: block;
    margin: 0 0 10px 0;
}

.form__input {
    height: 50px;
    /* padding: 0 20px; */
    border-radius: 5px;
    width: 100%;
    font-size: 18px;
    transition: all 0.5s ease 0s;
}

.form__input:focus {
    box-shadow: 0 0 15px aquamarine;
}

.form__input._error {
    box-shadow: 0 0 15px red;
}


textarea.form__input {
    min-height: 120px;
    resize: vertical;
    padding: 20px;
}

.options {
    padding: 10px 0 0 0;
}

.options__item {
    margin: 0 0 10px 0;
}

.options__input {
    display: none;
}

.options__input:checked + .options__label::after {
    transform: scale(1);
}

.options__label {
    display: inline-flex;
    font-size: 16px;
    line-height: 140%;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.options__label::before {
    content: "";
    align-self: flex-start;
    flex: 0 0 24px;
    height: 24px;
    background-color: whitesmoke;
    border-radius: 50%;
    margin: 0 10px 0 0 ;
}

.options__label::after {
    transition: transform 0.5s ease 0s;
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    background-color: #77608d;
    border-radius: 50%;
    transform: scale(0);
}


.file__item {
    position: relative;
}

.file__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    font-size: 0;
    cursor: pointer;
}

.file__button {
    display: inline-flex;
    min-height: 40px;
    border-radius: 30px;
    justify-content: center;
    align-items: center;
    background-color: #77608d;
    padding: 0px 20px;
}

.file__prewiew {
    display: inline-block;
    max-width: 100px;
    padding: 10px 0 0 0;
}

.file__prewiew img {
    max-width: 100%;
}

.checkbox {

}

.checkbox .checkbox__label::before._error {
    box-shadow: 0 0 15px red;
}

.checkbox__input {
    display: none;
}

.checkbox__input:checked + .checkbox__label::after {
    transform: scale(1);
}

.checkbox__label {
    font-size: 16px;
    line-height: 140%;
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.checkbox__label::before {
    content: "";
    align-self: flex-start;
    flex: 0 0 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 4px;
    margin: 0 10px;
}

.checkbox__label::after {
    transition: transform 0.5s ease 0s;
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    top: 4px;
    left: 14px;
    background-color: #1b6f7e;
    border-radius: 4px;
    transform: scale(0);
}

.checkbox__label a{
    color: #1b6f7e;
    
}

.form__button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60px;
    background-color: #1b6f7e;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 20px;
    box-shadow: 0 2px 0 #0c3138;
    transition: background-color 0.5s ease 0s;
    position: relative;
    top: 0;

}

.form__button:hover {
    background-color: #1b525c;
}

.form__button:active {
    top: 3px;
    box-shadow: 0 0px 0 #0c3138;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/select.css">
  <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <div class="form">
            <form action="#" id="form" class="form__body">
                <h1 class="form__title">Отправка данных на почту</h1>
                <div class="form__item">
                    <label for="formName" class="form__label">Имя:</label>
                    <input id="formName" type="text" name="name" class="form__input _zxc">
                </div>
                <div class="form__item">
                    <label for="formEmail" class="form__label">E-mail:</label>
                    <input id="formEmail" type="text" name="email" class="form__input _zxc _email">
                </div>

                <div class="form__item">
                   <div class="form__label">Левша или Правша</div>
                   <div class="options">
                       <div class="options__item">
                           <input id="formRightHanded" checked type="radio" value="right" name="hand" class="options__input">
                           <label for="formRightHanded" class="options__label">Правша</label>
                       </div>
                       <div class="options__item">
                        <input id="formLeftHanded" type="radio" value="left" name="hand" class="options__input">
                        <label for="formLeftHanded" class="options__label">Правша</label>
                    </div>
                   </div>
                </div>

                <div class="form__item">
                    <label for="formMessage" class="form__label">Сообщение:</label>
                    <textarea name="message" id="formMessage" class="form__input"></textarea>
                </div>
                <div class="form__item">
                    <div class="form__label">Возраст:</div>
                    <!-- Ебанутый слайдер выбора Ajax + JS + CSS -->
                    <select name="age" class="select">
                        <option disabled>Выбрать</option>
                        <option value="От 18 до 25" selected="selected"> Молодой</option>
                        <option value="От 25 до 45">Старый</option>
                        <option value="От 45 и выше">Дед</option>
                    </select>
                    <!-- Конец Ебанутого слайдера -->
                </div>

                <div class="form__item">
                    <div class="form__label">Прикрепить Фото</div>
                    <div class="file">
                        <div class="file__item">
                            <input id="formImage" accept=".jpg, .png, .gif" type="file" name="image" class="file__input">
                            <div class="file__button">Выбрать</div>
                        </div>
                        <div class="file__preview"></div>
                    </div>
                </div>

                <div class="form__item">
                    <div class="checkbox">
                        <input id="formAgreement" checked type="checkbox" name="agreement" class="checkbox__input _zxc">
                        <label for="formAgreement" class="checkbox__label"><span>Я даю свое согласие на обработку персональных данных в соответствие с <a href="#">Условием</a></span></label>
                    </div>
                </div>

                <button type="submit" class="form__button">Отправить</button>
            </form>
        </div>


    </div>


    <script src="js/script.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/select.js"></script>
    
</body>
</html>

Answer 1

//input.checkbox === false
!input.checked

<div class="checkbox form__input">

БЛОГ НА HUSL

Не работает валидация checkbox на js

Ответы (1 шт):