Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/3: Рейтинг темы: голосов - 3, средняя оценка - 5.00
kusttt
0 / 0 / 0
Регистрация: 05.07.2018
Сообщений: 48
1

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

02.01.2019, 17:32. Просмотров 558. Ответов 16

Вечер добрый, требуется помощь. Ниже код, с простой валидацией полей формы, где кнопка "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();
В общем, я застрял...
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
02.01.2019, 17:32
Ответы с готовыми решениями:

Валидация полей формы, события onfocus и onblur
Здравствуйте. Вопрос банален: валидация полей регистрационной формы. Написала простенькую форму...

Валидация формы
всем доброго времени суток. столкнулся с такой проблемой - нужно проверить на валидность данные,...

Валидация формы
Здравствуйте. У меня есть простая форма с двумя полями. Если поля не заполнены, то форма...

Валидация формы
Здравствуйте в JS есть два условия - если радиобаттон не выбран, то форма не отправляется и...

Валидация формы
Здравствуйте! Имеется скрипт при заполнении формы с полями ( имя, телефон, адрес). Если какое...

16
StudAssistant
Эксперт
9811 / 7003 / 2319
Регистрация: 17.04.2006
Сообщений: 9,622
02.01.2019, 17:32
Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.
16
amr-now
Эксперт JS
1925 / 1130 / 538
Регистрация: 14.06.2018
Сообщений: 2,771
02.01.2019, 19:28 2
Здравствуйте!
А почему в 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>
1
kusttt
0 / 0 / 0
Регистрация: 05.07.2018
Сообщений: 48
03.01.2019, 12:39  [ТС] 3
Спасибо за ответ. Проясните, пожалуйста некоторые моменты:

-Для чего оборачиваются в теги <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
Mr_Sergo
1315 / 694 / 259
Регистрация: 29.04.2016
Сообщений: 1,896
03.01.2019, 12:58 4
Цитата Сообщение от 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 свой обработчик, в данном случае три обработчика, зачем когда можно использовать всего один обработчик?
0
03.01.2019, 12:58
kusttt
0 / 0 / 0
Регистрация: 05.07.2018
Сообщений: 48
03.01.2019, 13:58  [ТС] 5
Цитата Сообщение от Mr_Sergo Посмотреть сообщение
В вашем коде на каждый input свой обработчик
Да, но каждое поле должно обрабатываться по своему и выдавать разные результаты. Касательно "13й строки" - уже сам понял, после того, как задал вопрос на форуме.
0
amr-now
Эксперт JS
1925 / 1130 / 538
Регистрация: 14.06.2018
Сообщений: 2,771
03.01.2019, 14:19 6
kusttt, в скрипте переменная aaa может принимать любое значение, а в функции-валидаторе всего лишь проверяется соответствие.
Если true, то одно из обязательных условий для активации кнопки submit выполнено.

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

Добавлено через 1 минуту
Цитата Сообщение от kusttt Посмотреть сообщение
каждое поле должно обрабатываться по своему
В данном случае функция-валидатор является единым замкОм, который проверяет на соответствие все зубчики ключа.

Добавлено через 7 минут
Не. Я согласен, что можно правила для каждого поля отдельно хранить в массиве.
Будет другой вариант решения.
Можно и через библиотечный метод валидации решить. Это третий вариант решения.
0
Mr_Sergo
1315 / 694 / 259
Регистрация: 29.04.2016
Сообщений: 1,896
03.01.2019, 14:22 7
Цитата Сообщение от kusttt Посмотреть сообщение
каждое поле должно обрабатываться по своему и выдавать разные результаты
дык оно же так и происходит... при любых изменениях происходящих в форме (после каждого нажатия клавиши), запускается функция checkParams в которой происходит определение текущего значения для каждого из инпутов и дальнейшая обработка каждого инпута отдельно... и все это происходит посредством одного обработчика а не трех

на самом деле сложно разложить по полкам если вы совсем не знакомы с JS
0
amr-now
Эксперт JS
1925 / 1130 / 538
Регистрация: 14.06.2018
Сообщений: 2,771
03.01.2019, 14:24 8
Mr_Sergo, тем более, когда реально для этой типовой задачи валидации существует минимум пять логических вариантов решения.
0
Mr_Sergo
03.01.2019, 14:27
  #9

Не по теме:

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

0
kusttt
0 / 0 / 0
Регистрация: 05.07.2018
Сообщений: 48
03.01.2019, 14:57  [ТС] 10
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
0
amr-now
Эксперт JS
1925 / 1130 / 538
Регистрация: 14.06.2018
Сообщений: 2,771
03.01.2019, 15:34 11
Цитата Сообщение от 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
0
Mr_Sergo
1315 / 694 / 259
Регистрация: 29.04.2016
Сообщений: 1,896
03.01.2019, 15:43 12
Цитата Сообщение от kusttt Посмотреть сообщение
вместо трех связок вида <input onchange="checkParams()"> в html, мы заносим их в .js файл строкой document.forms[0].onchange = checkParams ...
Все верно
Цитата Сообщение от kusttt Посмотреть сообщение
Я упоминал выше, что в некоторых случаях в поле указывается onchange, в некоторых oninput условие
Вот этого я никак не могу понять, у вас в коде я вижу только onChange, о каком oninput вы говорите? Вы имеете ввиду что видели где-то что кто-то использует в некоторых случаях onChange а в некоторых oninput ? Если да, то вот наглядная разница -> https://codepen.io/Mr_Sergo/pen/jXZqQe?editors=1010
0
kusttt
0 / 0 / 0
Регистрация: 05.07.2018
Сообщений: 48
03.01.2019, 15:45  [ТС] 13
amr-now, этот "Грязный хак" эквивалентен if (aaa == true ? Интересуюсь не из праздного любопытства, просто сочетание // равно true выглядит как комментарий. Что он делает, этот "Грязный хак"?
Цитата Сообщение от amr-now Посмотреть сообщение
На oninput можно наплевать.
Думаю, не получится, чтобы кнопка обрела активный вид (т.е. disadled чтобы был removed), пользователю, правильно заполнившему последнее поле, нужно щелкнуть на пустом месте, чтобы кнопка активировалась, что неудобно...
P.S. Да, я читал разницу onchange, oninput, onkeyup еще до того как запостил этот вопрос здесь...
0
Mr_Sergo
1315 / 694 / 259
Регистрация: 29.04.2016
Сообщений: 1,896
03.01.2019, 16:12 14
Перейдите по ссылке которую я скинул выше, напишите что-нибудь в первый инпут и кликните куда-нибудь в не его.
Напишите что-нибудь во второй инпут- и вы сразу же увидите разницу

Добавлено через 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/pen/vvdKmd?editors=1010

Добавлено через 16 секунд
Javascript
1
2
3
4
5
let aaa = 0;
 
if(aaa == false){
    alert('false');
}
1
amr-now
Эксперт JS
1925 / 1130 / 538
Регистрация: 14.06.2018
Сообщений: 2,771
03.01.2019, 17:09 15
kusttt, Mr_Sergo, я понял, о чём речь.
http://gnatkovsky.com.ua/poka-polya-...e-aktivna.html
Если не городить массивы с правилами, то oninput можно отдельно напихать на input type="text"

Но это не самое элегантное решение. Массивы с правилами, конечно, покруче.
0
kusttt
0 / 0 / 0
Регистрация: 05.07.2018
Сообщений: 48
03.01.2019, 20:20  [ТС] 16
Mr_Sergo,
Цитата Сообщение от Mr_Sergo Посмотреть сообщение
если это не сарказм то данная запись эквивалентна...
Да нет, не сарказм конечно... Меня смутило именно if (aaa // равно true в решении, предложенном amr-now , в дальнейшем еще прокоментированное, как "Грязный хак"))
Что я понял на данном этапе, что строки: if(aaa) и if(aaa == true) эквивалентны, поскольку мы указали let aaa = true; и // равно true - это просто комментарий.
Mr_Sergo, в приведенном мной коде oninput(а) действительно нет, код я упростил, чтоб "лишнее" не мешало и оставил везде onchange. Так, что здесь я "нахимичил".
amr-now, да я по ссылке, приведенной вами брал этот код и "пилил" его под себя))
0
amr-now
Эксперт JS
1925 / 1130 / 538
Регистрация: 14.06.2018
Сообщений: 2,771
04.01.2019, 14:01 17
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>
1
04.01.2019, 14:01
StackOverflow
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
04.01.2019, 14:01

Валидация элементов формы
Всем привет, в Js не силен, подскажите пожалуйста есть код - проверка на заполненность radio -...

Валидация формы на Javascript
Всем привет!:) Необходимо доработать форму с валидацией. Для выбора даты и времени тег &lt;input&gt; с...

Валидация формы обратной связи
Доброго дня! Делаю форму обратной связи и столкнулся с 2 проблема: 1) валидация номера телефона...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
17
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru