валидность инпутов

@юлл · Регистрация: 08.06.2012

Студворк — интернет-сервис помощи студентам

Добрый день!
у меня есть инпуты, и мне нужно свалидировать их на пустоту используя blur и focus. Каждому инпуту я вешаю обработчики, и я хотела бы выводить сообщение внизу либо сбоку от инпута, но пока не знаю, как это сделать. ID НЕ ИСПОЛЬЗОВАТЬ!
Плюс, чтобы при потере фокуса не дублировалась ошибка(было такое). И при возвращении фокуса сообщение об ошибке пропадало(пробовала делать this.parentNode.querySelector(".error"). style.display = "none", но что-то не то)
ТОЛЬКО JS, НИКАКОГО JQUERY

HTML5
1
2
3
4
<div class="wrap">
<label class="cell">Название сайта:</label>
<input class=" cell valid">
</div>

cell:display:table-cell

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 var forms = document.getElementsByTagName('form');
        for (var i=0; i< forms.length; i++){
                var fields = forms[i].querySelectorAll('.valid');
 
                for (let input of fields) {
                    input.addEventListener('blur', validateField, false);
                    input.addEventListener('focus', focus, false);
                }
 
            
                function validateField(event){
           
                        if (!this.value) {
                            this.classList.add('invalid');
                            var error = document.createElement('div')
                            error.className = 'error';
                            error.style.color = 'red';
                            error.innerHTML = "Поле не может быть пустым!";
                            //здесь нужно вставить элемент в DOM
 
                        } 
 
                }
 
                function focus(event){
                    this.classList.remove('invalid');
                }

@fixeri · 19.12.2019, 18:41

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .error { border: 1px solid red; }
        label { display: block; }
        .text-error { color: red; }
    </style>
</head>
<body>
    <form>
        <div>
            <p>Hello World</p>
        </div>
        <label>Введите имя
            <input type="text" data-error="Введите имя">
            <span class="text-error"></span>
        </label>
        <label>Введите e-mail
            <input type="text" data-error="Введите e-mail">
            <span class="text-error"></span>
        </label>
        <label>Введите пароль
            <input type="text" data-error="Введите пароль">
            <span class="text-error"></span>
        </label>
        <input type="submit">
    </form>
    <script type="text/javascript">
        "use strict";
 
        let inputs = Array.from(document.querySelectorAll("input[type='text']"));
 
        for (const input of inputs) {
            input.addEventListener("blur", showError);
            input.addEventListener("focus", hideError);
        }
 
        function showError(e) {
            let input = e.target;
            if (input.value.length === 0) {
                input.classList.add("error");
                input.nextSibling.textContent = input.dataset.error;
            }
        }
 
        function hideError(e) {
            let input = e.target;
            input.classList.remove("error");
            input.nextSibling.textContent = "";
        }
    </script>
</body>
</html>

@fixeri · 19.12.2019, 18:45

OR

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
"use strict";
 
let inputs = Array.from(document.querySelectorAll("input[type='text']"));
 
for (const input of inputs) {
    input.addEventListener("blur", validate);
    input.addEventListener("focus", validate);
    input.addEventListener("input", validate);
}
 
function validate(e) {
    let input = e.target;
    if (input.value.length === 0) {
        input.classList.add("error");
        input.nextSibling.textContent = input.dataset.error;
    } else {
        input.classList.remove("error");
        input.nextSibling.textContent = "";
    }
}

@юлл · 19.12.2019, 19:01 **[ТС]**

fixeri, а без атрибутов data можно это как-то сделать? Не проходили такого просто ещё. Форму создаём динамически, и лучше всего было бы создать рядом див и в него помещать ошибку. И при успешном заполнении удалять его.

@fixeri · 19.12.2019, 19:33

юлл,

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        label { display: block; }
        .error { border: 1px solid red; }
        .text-error { color: red; display: inline-block; }
        .hide { display: none; }
    </style>
</head>
<body>
    <form>
        <label>Введите имя
            <input type="text">
            <div class="text-error hide">Введите имя</div>
        </label>
        <label>Введите e-mail
            <input type="text">
            <div class="text-error hide">Введите e-mail</div>
        </label>
        <label>Введите пароль
            <input type="text">
            <div class="text-error hide">Введите пароль</div>
        </label><br>
        <input type="submit">
    </form>
    <script type="text/javascript">
    "use strict";
 
    let inputs = Array.from(document.querySelectorAll("input[type='text']"));
 
    for (const input of inputs) {
        input.addEventListener("blur", validate);
        input.addEventListener("focus", validate);
        input.addEventListener("input", validate);
    }
 
    function validate(e) {
        let input = e.target;
        if (input.value.length === 0) {
            input.classList.add("error");
            input.nextElementSibling.classList.remove("hide");
        } else {
            input.classList.remove("error");
            input.nextElementSibling.classList.add("hide");
        }
    }
    </script>
</body>
</html>

@amr-now · 19.12.2019, 22:40

Добрый день!

Сообщение от юлл

свалидировать их на пустоту используя blur и focus. Каждому инпуту я вешаю обработчики, и я хотела бы выводить сообщение внизу либо сбоку от инпута

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .place {
            position: relative;
            margin-left: 55px;
            margin-bottom: 18px;
        }
 
        input.error {
            border: 2px solid #ff0000;
        }
 
        input.valid {
            border: 2px solid green;
        }
 
        label.info {
            position: absolute;
            top: 0px;
            left: -55px;
        }
 
        label.error {
            color: #ff0000;
            font-size: 11px;
            position: absolute;
            top: 23px;
            left: 0px;
        }
        .rules{
            position: relative;
        }
    </style>
</head>
<body>
    <div id="container">
        <form method="post" id="formlogin" action="auth.php">
            <h2 class="form_head">Авторизация</h2>
            <div class="place">
                <label class="info">Email:</label>
                <input type="email" name="email" required>
                <label class="error email-msg"></label>
            </div>
            <div class="place">
                <label class="info">Пароль:</label>
                <input type="password" name="password" required minlength="6" maxlength="20">
                <label class="error password-msg"></label>
            </div>
            <div class="rules">
                <input type="checkbox" name="rules" required>
                <label>С правилами ознакомлен(а)</label>
                <label class="error rules-msg"></label>
            </div><br/>
            <input type="submit" value="Войти" name="btn_submit_auth">
        </form>
    </div>
    <script>
        // Начало реализации класса HTML5Validator
        function HTML5Validator(form, constraints,
            invalidSelector,
            validSelector,
            getErrEl = function (el) { return el.form.querySelector('.' + el.getAttribute("name") + '-msg'); } // Предоставляет ссылку на поле с описанием ошибки
        ) {
            this.form = form;
            this.constraints = constraints;
            this.invalidSelector = invalidSelector || "invalid";
            this.validSelector = validSelector === undefined ? "valid" : validSelector;
            this.getErrEl = getErrEl;
            form.noValidate = true; // Отменить штатную остановку submit на первой попавшейся ошибке
            if (!this.constraints)
            //this.constraints = [...this.form.elements].map(e => [e.getAttribute("name")]).filter(e => e[0]); // Современный и совместимый варианты 
            { this.constraints = []; for (var i = 0, name; i < this.form.elements.length; ++i) { if (name = this.form.elements[i].getAttribute("name")) this.constraints.push([name]); } }
 
            var that = this;
            // Функции, использующие замыкание на экземпляр HTML5Validator. Будут обработчиками, а там this чужой. Замыкаются на that
            this.focusHandler = function (e) {
                this.classList.remove(that.invalidSelector);
                if (that.validSelector)
                    this.classList.remove(that.validSelector);
                var errEl = that.getErrEl(this);
                if (errEl) errEl.textContent = "";
            }
            this.blurHandler = function (e) {
                if (this.validity.valid === false) {
                    this.classList.add(that.invalidSelector);
                    that.setErrMsg(this);
                }
                else if (that.validSelector)
                    this.classList.add(that.validSelector);
            }
        }
        HTML5Validator.prototype.validate = function () {
            var result = true,
                that = this;
            if (this.commonValidator)
                result = this.commonValidator() && result;
            this.constraints.forEach(function (item) {
                var field = that.form.elements[item[0]];
                if (field.validity.valid === false) {
                    result = false;
                    if (that.validSelector)
                        field.classList.remove(that.validSelector);
                    field.classList.add(that.invalidSelector);
                    that.setErrMsg(field);
                }
                else {
                    field.classList.remove(that.invalidSelector);
                    if (that.validSelector)
                        field.classList.add(that.validSelector);
                }
                field.addEventListener("focus", that.focusHandler);
                field.addEventListener("blur", that.blurHandler);
            });
            return result;
        }
 
        HTML5Validator.prototype.setErrMsg = function (el) {
            var validationMessage = el.validationMessage;
            for (var key in el.validity) {
                if (key !== "valid" && el.validity[key]) {
                    var array = this.constraints.find((e => e[0] === el.getAttribute("name"))); // Нашли свой подмассив или не нашли :))
                    if (array && array[1] && array[1][key]) {
                        validationMessage = array[1][key];
                        break;
                    }
                }
            }
            var errEl = this.getErrEl(el);
            if (errEl) errEl.textContent = validationMessage;
        }
        // Конец реализации класса HTML5Validator
 
        var constraints = [
            ["email", { valueMissing: "Поле Email обязательно к заполнению", typeMismatch: "Необходим формат адреса email" }],
            ["password", { valueMissing: "Поле Пароль обязательно к заполнению", tooShort: "Минимальная длина пароля 6 символов", tooLong: "Максимальная длина пароля 20 символов" }],
            ["rules", { valueMissing: "Обязательно подтверждение"}]
        ];
 
        // Запуск валидатора
        var form = document.forms[0];
 
        var validator = new HTML5Validator(form, constraints, "error", null);
        form.onsubmit = function () { return validator.validate(); };
    </script>
</body>
</html>

Вроде даже чекбокс валидируется, как и просили ранее.

Новые блоги и статьи Все статьи Все блоги /
Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .

@юлл 2 / 2 / 0 Регистрация: 08.06.2012 Сообщений: 126
	19.12.2019, 19:01 [ТС]
	fixeri, а без атрибутов data можно это как-то сделать? Не проходили такого просто ещё. Форму создаём динамически, и лучше всего было бы создать рядом див и в него помещать ошибку. И при успешном заполнении удалять его. 0