С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.58/40: Рейтинг темы: голосов - 40, средняя оценка - 4.58
16 / 4 / 4
Регистрация: 19.09.2012
Сообщений: 107
1

Проверка формы на заполненные поля

11.01.2018, 16:52. Показов 8388. Ответов 9
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Есть 10 полей
HTML5
1
input
и кнопка
HTML5
1
button
, кнопка не активна до тех пор, пока не заполнены все поля.
Подскажите пожалуйста как проверить 10 полей разом? Т.е. писать, что-то подобное
Javascript
1
if (input.value.length === 0 || input_1.value.length === 0 || input_2.value.length .... и т. д. )
не вариант, много кода выйдет, можно как-то сделать универсально? циклом например?
Что-то подобное.
Javascript
1
2
3
4
5
for (var i=0; i<=input.length-1; i++){
        if(input[i].value.length === 0){
                ......
                }
}
Но понятное дело, что это не работает.
Спасибо.
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
11.01.2018, 16:52
Ответы с готовыми решениями:

Проверка поля формы
доброго времени суток! я навичок в jscript уже перерыл многие темы форума не могу найти решения...

Проверка обязательного поля формы в зависимости от выбора select
Прошу оказать помощь Необходимо в зависимости от выбора select: выбор=1 - поле не обязательно...

При получении значений из формы, как получить только заполненные поля ?
Есть форма и скрипт который собирает значения по нажатию на кнопку: ...

Исчезают заполненные поля из формы
Помогите советом, пожалуйста! В БД Access в форме «Редактирование запроса» (кн. «Добавить запрос»)...

9
640 / 481 / 172
Регистрация: 26.05.2016
Сообщений: 2,665
11.01.2018, 20:05 2
Почему не работает? Выглядит более/менее
0
26 / 26 / 10
Регистрация: 19.06.2014
Сообщений: 158
11.01.2018, 21:01 3
Javascript
1
2
3
4
for(var i = 0; i < form.elements.length; i++){
    el = form.elements[i];
    // дальше проверяем значение элемента формы
}
0
16 / 4 / 4
Регистрация: 19.09.2012
Сообщений: 107
11.01.2018, 23:54  [ТС] 4
atanov
Не работает потому, что проверяет первый input, если он заполнен, то это true, и выполняется if, а другие не проверяет уже, даже если они не заполнены ((

Добавлено через 10 минут
jasper-blondin
Спасибо, но тоже не то. Это равносильно тому, что я напишу
Javascript
1
2
3
4
5
6
7
8
var input = document.querySelectorAll('input');
for (var i=0; i<=input.length-1; i++){
     el = input[i].value;
     //и дальше буду проверять
     if (el === 0){
     //....
     }
}
а как я написал в шапке, это не подходит. Либо я чет не до понял.
0
26 / 26 / 10
Регистрация: 19.06.2014
Сообщений: 158
12.01.2018, 00:29 5
S_kepti_k, почему же не подходит?
И нет, это не равносильно. В Вашем примере Вы находите абсолютно все input в документе. В моем -- только в данной форме.

Вобщем, у Вас есть форма с несколькими input. И нужно проверить их все.
От нас Вы хотите готовый код. Так?

Javascript
1
2
3
4
5
6
7
8
9
10
11
var form = document.getElementById("myform");
var status = false;
 
for(var i = 0; i < form.elements.length; i++){
    if(form.elements[i].value) {
        status = true;
        break;
    }
}
 
if(status) console.log("С формой все в порядке!");
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
12.01.2018, 07:20 6
Лучший ответ Сообщение было отмечено S_kepti_k как решение

Решение

S_kepti_k, к примеру - песочница
HTML5
1
2
3
4
5
6
7
8
9
10
11
<input class="grInput" type="text"/>
<input class="grInput" type="text"/>
<input class="grInput" type="text"/>
<input class="grInput" type="text"/>
<input class="grInput" type="text"/>
<input class="grInput" type="text"/>
<input class="grInput" type="text"/>
<input class="grInput" type="text"/>
<input class="grInput" type="text"/>
<input class="grInput" type="text"/>
<input type="button" value="button" id="btRevise" disabled="disabled"/>
Javascript
1
2
var check=0;
Array.from(document.getElementsByClassName("grInput")).map((i)=>{i.onchange=function(){(i.value.length!=0)?check++:check--;(check>=10)?btRevise.disabled=false:btRevise.disabled=true}});
1
16 / 4 / 4
Регистрация: 19.09.2012
Сообщений: 107
12.01.2018, 16:26  [ТС] 7
Всем спасибо, попробую варианты.

Добавлено через 1 час 35 минут
Qwerty_Wasd
Хороший способ, попробовал, все отлично. Спасибо.

Добавлено через 38 минут
Qwerty_Wasd
Не, все таки баг нашел. Приведу кусок кода, который связан за обработку поля
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
28
addEventListener('load', inicialize, false);
 
var input = document.querySelectorAll('input');
var textarea = document.querySelector('textarea');
var button = document.querySelectorAll('.button-contact');
var arrElementsField  = [];
var check = 0;
 
function inicialize(){
    addElementsArr();
    onChange();
}
 
function addElementsArr(){    // В массив заталкиваю 10 inputov и 1 textarea
    for (var i =0; i<=input.length-1; i++){
        arrElementsField.push(input[i]);
    }
    arrElementsField.push(textarea);
}
 
function onChange(){
    arrElementsField.map((i)=>{
        i.onblur=function(){
            (i.value.length!=0)?check++: check--;
            (check>=10)?button[0].disabled=false:button[0].disabled=true
        }
    });
}
Если заполнить любых 2 поля и между ними потыкать мышкой, то check инкрементируется до 10 и кнопка стает активной.
Аналогично, если потыкать мышкой по пустым полям, то check уходит в минус.
Или я чет не так написал? ((
0
640 / 481 / 172
Регистрация: 26.05.2016
Сообщений: 2,665
12.01.2018, 16:38 8
Javascript
1
i.onblur=function()
Возможно здесь ошибка, надо бы проверять событие onchange и смотреть при каждом onchange не пустые ли input'ы и textarea.
У Вас сейчас при сходе (потере фокуса) с элемента в function onChange() срабатывает безымянка i.onblur=function()
1
16 / 4 / 4
Регистрация: 19.09.2012
Сообщений: 107
12.01.2018, 16:53  [ТС] 9
jasper-blondin
Цитата Сообщение от jasper-blondin Посмотреть сообщение
Вы находите абсолютно все input в документе. В моем -- только в данной форме.
У меня все инпуты в форме находятся, не имеет значения как их искать в моем случае через form.elements - как у вас, или document.querySelectorAll('input') - как у меня. Ваш вариант поиска мне не подходит, у меня в forms не только input, куча других тегов таких как label, p, span, и др. Потом парсить это еще кучей строк.

Свой код пробовали, перед тем как предлагать? Ваш вариант идентичен моему в шапке. Объясняю почему не работает.
Допустим из 10 полей мы заполним одно поле, первое. Исходя из вашего кода заходим в цикл for и проверяем значение 0 елемента if(form.elements[i].value), если оно не пустое - а оно будет не пустое, так как мы заполнили его - это TRUE, то срабатывает status = true; и break; и выходим из цикла. Дальше идет код if(status) console.log("С формой все в порядке!");
И где же "С формой все в порядке" ??? Если мы даже остальные не проверили поля, а они будут пустые.

Добавлено через 6 минут
atanov Да точно, все верно. Спасибо. Попробовал. Работает. Я до этого кода еще добавлял на форму событие onchange, у меня их 2 срабатывало и не работало(( Потом поменял код, а в этом нет( Спасибо. Но тоже есть баг.
Если заполнить первое поле, убрать с него фокус, затем вернуть фокус обратно в первое поле, изменить значение, убрать фокус, и так несколько раз поменять слово, то check плюсуется и так можно кнопку разблочить
0
26 / 26 / 10
Регистрация: 19.06.2014
Сообщений: 158
12.01.2018, 19:50 10
Цитата Сообщение от S_kepti_k Посмотреть сообщение
И где же "С формой все в порядке" ??? Если мы даже остальные не проверили поля, а они будут пустые
Если Вам нужно, чтобы хотя бы одно поле было заполнено, -- используйте мой предыдущий код. Если Вам нужно, чтобы все поля были заполнены, просто поменяйте изначальное состояние переменной status. Неужели все нужно разжевывать?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<form action="">
    <input type="text" name="input1">
    <input type="text" name="input2">
 
    <p>some text</p>
    <label for="">some label</label>
 
    <textarea name="textarea1"></textarea>
    <textarea name="textarea2"></textarea>
 
    <input type="submit" value="Submit">
</form>
Javascript
1
2
3
4
5
6
7
8
9
var form = document.forms[0];
 
form.onsubmit = function () {
    for(var i = 0; i < form.elements.length; i++) {
        if(form.elements[i].value == "") {
            return false;
        }
    }
}
 Комментарий модератора 

3.1 Уважительно относитесь к другим участникам форума.
0
12.01.2018, 19:50
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
12.01.2018, 19:50
Помогаю со студенческими работами здесь

Проверка поля формы по After_Update
Здравствуйте! Имеется простенькая форма, привязанная к таблице ДАТА, СУММА, КОММЕНТ При...

Проверка поля при заполнении формы на симфол @
Как вы понимаете хотелось бы при заполнении формы проверить правильно ли юзер указывается например:...

Заполненные поля оставить заполнеными
Народ помогите что здесь не правильно делаю &lt;form name=&quot;datu_ievade_persona&quot; method=&quot;post&quot;...

Не отображать не заполненные произвольные поля
Немного предыстории: на сайте (wordpress) поставил плагин Toolset Types, создал произвольные...


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

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
Книги и учебные ресурсы по C#
InfoMaster 08.01.2025
Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .
Что такое NullReferenceEx­­­ception и как исправить?
InfoMaster 08.01.2025
NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .
Что такое Null Pointer Exception (NPE) и как это исправить?
InfoMaster 08.01.2025
Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .
Русский язык в консоли C++
InfoMaster 08.01.2025
При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .
Telegram бот на C#
InfoMaster 08.01.2025
Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .
Использование GraphQL в Go (Golang)
InfoMaster 08.01.2025
Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .
Что лучше использовать при создании класса в Java: сеттеры или конструктор?
Alexander-7 08.01.2025
Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .
Как работать с GraphQL на TypeScript
InfoMaster 08.01.2025
Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .
Счётчик на базе сумматоров + регистров и генератора сигналов согласования.
Hrethgir 07.01.2025
Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .
Как перейти с Options API на Composition API в Vue.js
BasicMan 06.01.2025
Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .
Архитектура современных процессоров
inter-admin 06.01.2025
Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .
История создания реляционной модели баз данных, правила Кодда
Programming 06.01.2025
Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru