Валидация полей формы

@kusttt · Регистрация: 05.07.2018

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

Вечер добрый, требуется помощь. Ниже код, с простой валидацией полей формы, где кнопка "submit" становится активной после заполнения всех полей.
Два вопроса:
1) Как усложнить регулярным выражением для определенного поля условие заполнения, например, чтобы для переменной "yy" нужно было ввести 2 цифры и 3 пробела?
2) В коде Javascript у меня есть еще переменная, назовем "aaa", которую тоже хочу включить в условие активации кнопки "отправить".

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
<html>
<head>
</head>
<body> 
  
<input id="xx" onChange="checkParams()">
<input id="yy" onChange="checkParams()">
<input id="zz" onChange="checkParams()">
<button type="submit" id="submit" disabled >Отправить</button>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
function checkParams() {
    var xx = $('#xx').val();//1
    var yy = $('#yy').val();//2
    var zz = $('#zz').val();//3
        
      if ( 
       xx.length != 0
    && yy.length >= 2
    && zz.length >= 3)
    {$('#submit').removeAttr('disabled');} 
    else {$('#submit').attr('disabled', 'disabled');}
}
</script>
 
</body>
</html>

Просто прописывая в условии значение "true", кнопка "submit" остается неактивной.

JavaScript
1
2
if (aaa == true
&& xx.length != 0) и т.д.

Добавляю ее в верхнюю часть кода, к другим переменным - тоже не помогает:

JavaScript
1
var aaa = $('#aaa').val();

В общем, я застрял...

@amr-now · 02.01.2019, 19:28

Здравствуйте!
А почему в JS не работает одновременное сочетание нескольких look ahead?
Я скажу всем, до чего довёл планету этот фигляр ПЖ!

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <form action="javascript:alert('Имитирую отправление');">
        <input id="xx">
        <input id="yy">
        <input id="zz">
        <button type="submit" id="submit" disabled>Отправить</button>
    </form>
    <script>
        document.forms[0].onchange = checkParams;
        let aaa = true; // Переменная принимает значение в скрипте
 
        function checkParams() {
            let xx = document.getElementById("xx").value,
                yy = document.getElementById("yy").value,
                zz = document.getElementById("zz").value,
                submit = document.getElementById("submit");
 
            if (aaa // равно true
                && xx.length > 0
                && yy.match(/(?=(\d\D*){2,})/) // минимум две цифры и три пробела
                && yy.match(/(?=(\s\S*){3,})/) 
                && zz.length >= 3)
                submit.removeAttribute('disabled');
            else
                submit.setAttribute('disabled', 'disabled');
        }
    </script>
</body>
</html>

@kusttt · 03.01.2019, 12:39 **[ТС]**

Спасибо за ответ. Проясните, пожалуйста некоторые моменты:

-Для чего оборачиваются в теги <form> поля <input>? Чтобы можно было использовать комбинацию кода document.forms[0].onchange = checkParams;?

-Некоторые поля принимают значения не onchange а oninput. Как его (oninput) добавить в код? Или может все же лучше оставить в input полях "свои" значения вида onchange="checkParams()" и oninput="checkParams()"?

-let aaa = true Этим выражением мы указываем, что разрешаем переменной aaa быть true, а указывая в условии переменную if (aaa уже не пишем ==true, поскольку это уже подразумевается конструкцией let aaa = true; Но, если это так, то в чем проверка? Хоть так, хоть этак = true;
Наверное, я изначально неправильно проблему изложил: есть поле с идентификатором xx, оно должно быть заполнено согласно условиям которые прописаны в javascript коде переменной aaa. И, если условия прописаны иначе - кнопка submit остается неактивной.

-В чем преимущество использования в данном случае xx = document.getElementById("xx").value, вместо var xx = $('#xx').val();

Прошу прощения, что сумбурно излагаю, и наверняка, наговорил много несуразностей с точки зрения программиста. Наверное, потому, что не программист.

@Mr_Sergo · 03.01.2019, 12:58

Сообщение от kusttt

-В чем преимущество использования в данном случае xx = document.getElementById("xx").value, вместо var xx = $('#xx').val();

Попробуйте у себя в коде отключить (удалить 11 строку из кода приведенного в 1-ом вашем посте) библиотеку Jquery и использовать var xx = $('#xx').val(); вместо var xx = document.getElementById("xx").value; --- не будет работать, так как не подключена библиотека, иными словами вы используете дополнительный язык программирования а amr-now вполне может обойтись без библиотеки

Добавлено через 3 минуты

Сообщение от kusttt

-Для чего оборачиваются в теги <form> поля <input>?

В вашем коде на каждый input свой обработчик, в данном случае три обработчика, зачем когда можно использовать всего один обработчик?

@kusttt · 03.01.2019, 13:58 **[ТС]**

Сообщение от Mr_Sergo

В вашем коде на каждый input свой обработчик

Да, но каждое поле должно обрабатываться по своему и выдавать разные результаты. Касательно "13й строки" - уже сам понял, после того, как задал вопрос на форуме.

@amr-now · 03.01.2019, 14:19

kusttt, в скрипте переменная aaa может принимать любое значение, а в функции-валидаторе всего лишь проверяется соответствие.
Если true, то одно из обязательных условий для активации кнопки submit выполнено.

Что тут неясного?

Добавлено через 1 минуту

Сообщение от kusttt

каждое поле должно обрабатываться по своему

В данном случае функция-валидатор является единым замкОм, который проверяет на соответствие все зубчики ключа.

Добавлено через 7 минут
Не. Я согласен, что можно правила для каждого поля отдельно хранить в массиве.
Будет другой вариант решения.
Можно и через библиотечный метод валидации решить. Это третий вариант решения.

@Mr_Sergo · 03.01.2019, 14:22

Сообщение от kusttt

каждое поле должно обрабатываться по своему и выдавать разные результаты

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

на самом деле сложно разложить по полкам если вы совсем не знакомы с JS

@amr-now · 03.01.2019, 14:24

Mr_Sergo, тем более, когда реально для этой типовой задачи валидации существует минимум пять логических вариантов решения.

@Mr_Sergo · 03.01.2019, 14:27

Не по теме:

amr-now, знаю что для любой задачи можно подобрать несколько решений, сам сегодня подобным маился -> https://www.cyberforum.ru/post13211258.html
не то что бы там принципиально, в вариантах, отличалось, но все равно разный подход...

@kusttt · 03.01.2019, 14:57 **[ТС]**

amr-now,

Сообщение от amr-now

Если true, то одно из обязательных условий для активации кнопки submit выполнено. Что тут неясного?

Непонятно, почему if (aaa // равно true, а не if (aaa == true

Сообщение от amr-now

функция-валидатор является единым замкОм, который проверяет на соответствие все зубчики ключа.

Это был ответ на "Почему inputs завернуты в <form>"?

Сообщение от Mr_Sergo

дык оно же так и происходит... + сложно разложить по полкам если вы совсем не знакомы с JS

Да, вроде понял: вместо трех связок вида <input onchange="checkParams()"> в html, мы заносим их в .js файл строкой document.forms[0].onchange = checkParams; где говорится, что в полях формы (forms), при изменении (onchange) будет срабатывать function checkParams. Я упоминал выше, что в некоторых случаях в поле указывается onchange, в некоторых oninput условие, но в целом, я понял, что сделал amr-now. Он просто схватил весь код в теги forms и прописал для него checkParams для условия onchange

@amr-now · 03.01.2019, 15:34

Сообщение от kusttt

Непонятно, почему if (aaa // равно true, а не if (aaa == true

Грязный хак, унаследованный из языка Си.

Сообщение от kusttt

что в некоторых случаях в поле указывается onchange, в некоторых oninput условие

На oninput можно наплевать. Здесь при попытке нажать кнопку submit всё равно произойдет потеря фокуса.

Атрибут событий oninput позволяет задать срабатывание скрипта, когда элемент получает ввод данных от пользователя.

Это событие аналогично событию onchange. Разница заключается в том, что событие oninput происходит сразу после того как значение элемента изменилось, а событие onchange происходит, когда элемент теряет фокус. Другим отличием является то, что событие onchange имеет более широкую поддержку браузерами и работает с такими элементами как <keygen>, <select> и более расширено с элементом <input>.

http://basicweb.ru/html/event_oninput.php

@Mr_Sergo · 03.01.2019, 15:43

Сообщение от kusttt

вместо трех связок вида <input onchange="checkParams()"> в html, мы заносим их в .js файл строкой document.forms[0].onchange = checkParams ...

Все верно

Сообщение от kusttt

Я упоминал выше, что в некоторых случаях в поле указывается onchange, в некоторых oninput условие

Вот этого я никак не могу понять, у вас в коде я вижу только onChange, о каком oninput вы говорите? Вы имеете ввиду что видели где-то что кто-то использует в некоторых случаях onChange а в некоторых oninput ? Если да, то вот наглядная разница -> https://codepen.io/Mr_Sergo/pe... itors=1010

@kusttt · 03.01.2019, 15:45 **[ТС]**

amr-now, этот "Грязный хак" эквивалентен if (aaa == true ? Интересуюсь не из праздного любопытства, просто сочетание // равно true выглядит как комментарий. Что он делает, этот "Грязный хак"?

Сообщение от amr-now

На oninput можно наплевать.

Думаю, не получится, чтобы кнопка обрела активный вид (т.е. disadled чтобы был removed), пользователю, правильно заполнившему последнее поле, нужно щелкнуть на пустом месте, чтобы кнопка активировалась, что неудобно...
P.S. Да, я читал разницу onchange, oninput, onkeyup еще до того как запостил этот вопрос здесь...

@Mr_Sergo · 03.01.2019, 16:12

Перейдите по ссылке которую я скинул выше, напишите что-нибудь в первый инпут и кликните куда-нибудь в не его.
Напишите что-нибудь во второй инпут- и вы сразу же увидите разницу

Добавлено через 1 минуту
Вопрос снят, пока писал не видел что вам все понятно

Добавлено через 11 минут

Сообщение от kusttt

этот "Грязный хак" эквивалентен if (aaa == true

если это не сарказм

то данная запись:

JavaScript
1
2
3
if(aaa){
    // дальнейший код
}

эквивалентна:

JavaScript
1
2
3
if(aaa == true){
    // дальнейший код
}

Добавлено через 1 минуту
то же самое и с false

JavaScript
1
2
3
4
5
6
7
8
9
if(!aaa){
    // дальнейший код
}
 
// эквивалентно
 
if(aaa == false){
    // дальнейший код
}

Добавлено через 9 минут
кстати тут есть интересный момент... если aaa будет равняться 0, то она будет false -> https://codepen.io/Mr_Sergo/pe... itors=1010

Добавлено через 16 секунд

JavaScript
1
2
3
4
5
let aaa = 0;
 
if(aaa == false){
    alert('false');
}

@amr-now · 03.01.2019, 17:09

kusttt, Mr_Sergo, я понял, о чём речь.
http://gnatkovsky.com.ua/poka-... tivna.html
Если не городить массивы с правилами, то oninput можно отдельно напихать на input type="text"

Но это не самое элегантное решение. Массивы с правилами, конечно, покруче.

@kusttt · 03.01.2019, 20:20 **[ТС]**

Mr_Sergo,

Сообщение от Mr_Sergo

если это не сарказм то данная запись эквивалентна...

Да нет, не сарказм конечно... Меня смутило именно if (aaa // равно true в решении, предложенном amr-now , в дальнейшем еще прокоментированное, как "Грязный хак"))
Что я понял на данном этапе, что строки: if(aaa) и if(aaa == true) эквивалентны, поскольку мы указали let aaa = true; и // равно true - это просто комментарий.
Mr_Sergo, в приведенном мной коде oninput(а) действительно нет, код я упростил, чтоб "лишнее" не мешало и оставил везде onchange. Так, что здесь я "нахимичил".
amr-now, да я по ссылке, приведенной вами брал этот код и "пилил" его под себя))

@amr-now · 04.01.2019, 14:01

kusttt, Mr_Sergo, вариант с массивом настроек.
Элемент массива:
- id элемента HTML,
- имя события,
- предикат, возвращающий true, если произвольное условие выполнено.

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <form action="javascript:alert('Имитирую отправление');">
        <input id="xx">
        <input id="yy">
        <input id="zz">
        <button type="submit" id="submit" disabled>Отправить</button>
    </form>
    <script>
        let settings = [
            ["xx", "input", e => e.value.length > 0],
            ["yy", "input", e =>
                e.value.match(/(?=(\d\D*){2,})/) // минимум две цифры и три пробела
                && e.value.match(/(?=(\s\S*){3,})/)
            ],
            ["zz", "input", e => e.value.length >= 3]
        ];
        // Функция, зависимая от конкретной страницы. Станет callback-ом
        function toggleSubmit(condition) {
            let submit = document.getElementById("submit");
            if (condition)
                submit.removeAttribute('disabled');
            else
                submit.setAttribute('disabled', 'disabled');
        }
 
        initForm(settings, toggleSubmit);
 
        // Две функции, не зависимые от конкретной страницы
        function initForm(array, callback) {
            for (let item of array) {
                let el = document.getElementById(item[0]);
                el.addEventListener(item[1], e => { checkAll(callback, array); }); // Любое событие из списка вызывает общую проверку 
            }
        }
        function checkAll(callback, array) { // Выполнить callback с параметром - результатом общей проверки
            callback(array.every(e => e[2](document.getElementById(e[0]))));
        }
    </script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20%	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .

@kusttt 0 / 0 / 0 Регистрация: 05.07.2018 Сообщений: 48
	03.01.2019, 12:39 [ТС]
	Спасибо за ответ. Проясните, пожалуйста некоторые моменты: -Для чего оборачиваются в теги <form> поля <input>? Чтобы можно было использовать комбинацию кода document.forms[0].onchange = checkParams;? -Некоторые поля принимают значения не onchange а oninput. Как его (oninput) добавить в код? Или может все же лучше оставить в input полях "свои" значения вида onchange="checkParams()" и oninput="checkParams()"? -let aaa = true Этим выражением мы указываем, что разрешаем переменной aaa быть true, а указывая в условии переменную if (aaa уже не пишем ==true, поскольку это уже подразумевается конструкцией let aaa = true; Но, если это так, то в чем проверка? Хоть так, хоть этак = true; Наверное, я изначально неправильно проблему изложил: есть поле с идентификатором xx, оно должно быть заполнено согласно условиям которые прописаны в javascript коде переменной aaa. И, если условия прописаны иначе - кнопка submit остается неактивной. -В чем преимущество использования в данном случае xx = document.getElementById("xx").value, вместо var xx = $('#xx').val(); Прошу прощения, что сумбурно излагаю, и наверняка, наговорил много несуразностей с точки зрения программиста. Наверное, потому, что не программист. 0

@amr-now 6497 / 3908 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	03.01.2019, 14:24
	Mr_Sergo, тем более, когда реально для этой типовой задачи валидации существует минимум пять логических вариантов решения. 0

@Mr_Sergo
	03.01.2019, 14:27
	Не по теме: amr-now, знаю что для любой задачи можно подобрать несколько решений, сам сегодня подобным маился -> https://www.cyberforum.ru/post13211258.html не то что бы там принципиально, в вариантах, отличалось, но все равно разный подход... 0

@amr-now 6497 / 3908 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	03.01.2019, 17:09
	kusttt, Mr_Sergo, я понял, о чём речь. http://gnatkovsky.com.ua/poka-... tivna.html Если не городить массивы с правилами, то oninput можно отдельно напихать на input type="text" Но это не самое элегантное решение. Массивы с правилами, конечно, покруче. 0