Валидация формы смешанного типа полей

@mrBobrillo · Регистрация: 18.11.2015

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

Добрый вечер всем. Прошу помощи в подсказке. Есть форма типа опросника по шагам, сделал простой пример без заморочек и скрытия шагов. Так вот к чему я, если радио кнопки можно провалидировать при каждом нажатии кнопки более менее простым способом, то как можно провалидировать смешанный шаг, в котором нужно выбрать или вариант из радио кнопки или вписать что то в текстовое поле? Это вызвало затруднение((

Пример в JsFiddle

HTML5
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
<div class="container">
  <div class="step _pos1">
  <h3>Step 1</h3>
  
  <div class="row">
    <input type="radio" name="test1" id="test1">
    <label class="label" for="test1">Test 1</label>
  </div>
  <div class="row">
    <input type="radio" name="test1" id="test2">
    <label class="label" for="test2">Test 2</label>
  </div>
  <div class="row">
    <input type="radio" name="test1" id="test3">
    <label class="label" for="test3">Test 3</label>
  </div>
  </div>
  <div class="step _pos2">
  <h3>Step 2</h3>
  
  <div class="row">
    <input type="radio" name="test2" id="test4">
    <label class="label" for="test4">Test 4</label>
  </div>
  <div class="row">
    <input type="radio" name="test2" id="test5">
    <label class="label" for="test5">Test 5</label>
  </div>
  <div class="row">
    <input type="radio" name="test2" id="test6">
    <label class="label" for="test6">Test 6</label>
  </div>
  <div class="row">
    <input type="text" name="" id="test6" placeholder="custom text">
  </div>
  </div>
  <div class="step _pos1">
  <h3>Step 3</h3>
  
  <div class="row">
    <input type="radio" name="test3" id="test7">
    <label class="label" for="test7">Test 7</label>
  </div>
  <div class="row">
    <input type="radio" name="test3" id="test8">
    <label class="label" for="test8">Test 8</label>
  </div>
  <div class="row">
    <input type="radio" name="test3" id="test9">
    <label class="label" for="test9">Test 9</label>
  </div>
  </div>
  <br>
  <div class=""><button>Submit</button></div>
</div>

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
function checking_block(block) {
        var list = block.querySelectorAll('input[required], input[radio], select[required]');
        var state = true;
 
        for (var i in list) {
            if(list[i].type == 'radio') {
                var current_radio = block.querySelector('input[name="' + list[i].name + '"]:checked');
 
                if(!current_radio) {
                    block.querySelectorAll('input[name="' + list[i].name + '"]').forEach(function(item){
                        item.closest('.quiz-form__row').querySelector('.quiz-form__label').classList.add('error');
                    });
                    state = false;
                }
                continue;
            }
            if (typeof(list[i]) == 'object') {
                if (list[i].value == "") {
                    state = false;
                    list[i].closest('.quiz-form__row').classList.add('error');
                } else {
                    list[i].closest('.quiz-form__row').classList.remove('error');
                }
            }
        }
        return state
    }

Если что то не корректно пояснил то допишу

@web_coder2 · 10.12.2020, 04:43

Доброй ночи mrBobrillo,

Вариантов много например сделать аккордеон
Все остальные по тому же типу, т.е. на против каждого шага поставить какой нибудь управляющий элемент по которому тыкаешь и становится активным одна из нужных групп.

@mrBobrillo · 10.12.2020, 14:34 **[ТС]**

День добрый web_coder2,
Вы меня не правильно поняли, мне не нужен аккордион. У меня есть форма опросник, уже работающий скрипт с шагами, валидация полей и радио кнопок, но если у меня попадается шаг, в котором есть смесь радио кнопок и просто текстового поля, не получается провалидировать их , т.е что просиходит, если я выбираю радио кнопку и нажимаю далее, валидация ругается на текстовое поле и наоборот.
Пример выше просто для наглядности во втором шаге, как и описал, не стал делать полного функционала шагов ...

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@web_coder2 755 / 359 / 100 Регистрация: 04.10.2018 Сообщений: 548
	10.12.2020, 04:43
	Доброй ночи mrBobrillo, Вариантов много например сделать аккордеон Все остальные по тому же типу, т.е. на против каждого шага поставить какой нибудь управляющий элемент по которому тыкаешь и становится активным одна из нужных групп. 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	10.12.2020, 14:34 [ТС]
	День добрый web_coder2, Вы меня не правильно поняли, мне не нужен аккордион. У меня есть форма опросник, уже работающий скрипт с шагами, валидация полей и радио кнопок, но если у меня попадается шаг, в котором есть смесь радио кнопок и просто текстового поля, не получается провалидировать их , т.е что просиходит, если я выбираю радио кнопку и нажимаю далее, валидация ругается на текстовое поле и наоборот. Пример выше просто для наглядности во втором шаге, как и описал, не стал делать полного функционала шагов ... 0