Проверка значения <input type="text"> в <td></td>

19.02.2013, 11:28. **Показов** 5480. **Ответов** 3

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

Привет, друзья!

Столкнулся с такой проблемой:

Есть форма заказа, хочу, чтобы, когда пользователь заполнял ее, шла проверка на введенные данные, т.е., если где-то, что - то не введено, скрипт подсвечивал это.

В общем, есть таблица:

HTML5
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
<form action="" method="post" name="form1" id="form1">
<br><br>
<div id="test_layer" style="position:relative; left:5%">
<span lang="ru">Ф.И.О.: </span>
<span lang="en-us">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span> 
<input type="text" name="fio" id="fio" size="97">
 
<p><span lang="ru">&nbsp;Организация: </span><span lang="en-us">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><input type="text" name="organisation" id="organisation" size="97">
</p>
<p><span lang="en-us">&nbsp; E-mail:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span> <input type="text" name="email" id="email" size="97">
 
</p>
<p><span lang="en-us">&nbsp;</span><span lang="ru">Контактный телефон:</span><span lang="en-us">&nbsp;
</span><span lang="ru">&nbsp;</span><span lang="en-us">&nbsp;&nbsp; </span> <input type="text" name="phone" id="phone" size="97">
 
</p>
<p>&nbsp;</p>
</div>
 
<table border="0" width="100%" id="table1" cellspacing="7" cellpadding="0">
    <tr>
        <td width="40" height="27" bgcolor="#D2E2F2">
        <p align="center"><span lang="ru">№</span></td>
        <td width="336" height="27" bgcolor="#D2E2F2" width="35%">
        <p align="center">Наименование</td>
        <td width="76" height="27" bgcolor="#D2E2F2">
        <p align="center">Единица измерения</td>
        <td height="27" bgcolor="#D2E2F2" width="10%">
        <p align="center">Количество</td>
    </tr>
    <tr>
    <td><input type="text"></td>    
    <td><input type="text"></td>    
    <td><input type="text"></td>    
       </tr>
 
    <tr>
    <td><input type="text"></td>    
    <td><input type="text"></td>    
    <td><input type="text"></td>    
       </tr>
 
 
    <tr>
    <td><input type="text"></td>    
    <td><input type="text"></td>    
    <td><input type="text"></td>    
       </tr>
 
 
    <tr>
    <td><input type="text"></td>    
    <td><input type="text"></td>    
    <td><input type="text"></td>    
       </tr>
 
</table>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span lang="en-us"> </span>&nbsp;<input type="button" value="Добавить строки" id="adder">
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;<div align="center"> <input id="send_all" type="submit" value="Отправить заявку"> </div>
 
</form>

Тут в тегах <td></td> вставляются поля ввода текста. Юзер эти поля заполняет.
Вобщем нужно, когда юзер щелкает по кнопке отправки, шла проверка, какие <input type="text"> заполнены, а какие нет. Если что не заполнено, оно выделяется.

Ребята, я подзапарился уже. Подскажите, друзья, как нужно сделать? Вот у меня такой код на jquery:

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
29
30
31
32
33
<script>
 
$("#send_all").click(function()
{
    $('tr').each(function()
      {
    var k=0;
    $("td",this).each(function()
    {
        
        $(":text",this).each(function()
    {
        if($(this).val()!="")
        {
         k=k+1;
        }
         if(k<1)
        {
            $(this).css({background:"yellow", border:"1px red solid"});
            $('#form1').submit(function(){
            return false;
        });
        }
        
   });
   });
      });
    
  
   
    
});
</script>

Выделяет только то, где вообще ничего не введено. Если где - то в строке таблицы хоть одно поле ввода заполнено, оно не выделяется. Подскажите, пожалуйста! Спасибо

@Soldado · 19.02.2013, 13:35

Лучше выделять не через изменение сss, а путём добавления или удаления соответствующего класса. А свойства класса задать в стилях.

CSS
1
2
3
4
.pustoyInput{
background-color:yellow;
border:1px red solid;   
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
$(document).ready(function(){
$("#form1").submit(function(e){
var indicator=0;
    $('#table1 input[type=text]').each(function(){
        if($(this).val()==""){
          $(this).addClass('pustoyInput');
            indicator++;    
                       }
       else{
        $(this).removeClass('pustoyInput');
          }
    if(indicator!=0)
            {e.preventDefault();}      
       });
    indicator=0;   
 });
});/*end  ready*/
 </script>

Ещё по вёрстке: в строках 25, 27, 29, 31 открытый тег абзаца, но нет закрытия

HTML5
1
2
<td width="40" height="27" bgcolor="#D2E2F2">
        <p align="center"><span lang="ru">№</span></td>

Демо-страница

@Anton_IV · 19.02.2013, 15:43

Подскажите: нашел этот топик, гугля по тому же вопрос, что задал и т.з. Подскажите: а , если нужно, чтобы подсвечивало только то, где что-то введено а что-то нет. Т.е., смотрите, есть табличка в ней 4 поля для ввода текста. Вот нужно, чтобы подчеркивало только там, где все 4 поля не заполнены. Т.е. заполнены 1,2 или 3 поля. Там , где ничего не заполнено, подчеркивать не нужно ничего.

т.е. нужно, чтобы скрипт проходил по строкам таблицы и там, где не все ячейки заполнены(теги <td>), выделяло это
Спасибо

@Soldado · 19.02.2013, 16:56

Очень плохо спросили. Такой сумбур.
И так - то, что я понял нужно
Подсвет строк, кроме полностью пустых и полностью заполненных
(если в строке всё заполнено или всё пусто - не подсвечиваем)
Так? Если да тогда открывайте

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

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<html> 
  <head>
    <title>Проверка полей формы</title>
    
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />    
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
 <script type="text/javascript">
$(document).ready(function(){
    
$("#form1").submit(function(e){
var indicator=0;
// Для каждой строки
    $('#table1 tr').each(function(){ 
       // просматриваем все 4 ячейки
        $(this).find('td input[type=text]').each(function(){
                if($(this).val()!="")indicator++;// считаем все НЕ пустые
                if(indicator<4 && indicator!=0)$(this).closest('tr').find('input').addClass('nofullTr');//если есть НЕ пустые не 4 то подсвечиваем все инпуты
                else $(this).closest('tr').find('input').removeClass('nofullTr'); //иначе  Не подсвечиваем   
            });
      indicator=0; //cбрасываем счётчик для новой строки 
     });
/* после того как всё проверили и подсветили проверяем сколько подсвеченных строк и если такие есть, то отменяем отправку формы*/  
if($('.nofullTr').size()!=0)
{
e.preventDefault(); 
} 
});  
      
});/*end  ready*/
 </script>
<style>
.nofullTr{
background-color:yellow;
border:2px red solid;   
}
 
 
</style>    
  </head>
  <body style="padding:180px;">
  
<h3>Подсвет всех строк кроме полностью пустых и полностью заполненных</h3><br/>
<form  method="post" name="form1" id="form1" action="index2.html">
 
<table border="0" width="100%" id="table1" cellspacing="7" cellpadding="0">
    
    <tr>
    <td><input type="text" value="1"></td>    
    <td><input type="text" value="2"></td>    
    <td><input type="text" value="3"></td>
    <td><input type="text" value="4"></td>    
       </tr>
 
    <tr>
    <td><input type="text" value="1" ></td>    
    <td><input type="text"></td>    
    <td><input type="text"></td>
    <td><input type="text"value="4" > </td>    
       </tr>
 <tr>
    <td><input type="text"></td>    
    <td><input type="text"></td>    
    <td><input type="text"></td>
    <td><input type="text"></td>    
       </tr>
    
 
</table>
 
<input id="send_all" type="submit" value="Отправить"> </div>
 
</form>
 
  </body>
</html>

Если нет то объясните толком, а то Вы излагаете очень непонятно.

Добавлено через 6 минут
Демо-страница

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@Anton_IV 0 / 0 / 0 Регистрация: 30.10.2016 Сообщений: 7
	19.02.2013, 15:43
	Подскажите: нашел этот топик, гугля по тому же вопрос, что задал и т.з. Подскажите: а , если нужно, чтобы подсвечивало только то, где что-то введено а что-то нет. Т.е., смотрите, есть табличка в ней 4 поля для ввода текста. Вот нужно, чтобы подчеркивало только там, где все 4 поля не заполнены. Т.е. заполнены 1,2 или 3 поля. Там , где ничего не заполнено, подчеркивать не нужно ничего. т.е. нужно, чтобы скрипт проходил по строкам таблицы и там, где не все ячейки заполнены(теги <td>), выделяло это Спасибо 0