javascript проверка формы перед отправкой

@rockRainbow · Регистрация: 02.11.2012

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

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

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!doctype html>
<head>
<meta charset="windows-1251">
<title>Головна сторінка</title>
<STYLE>
</style>
</head>
<body style="background:url('ASUS.jpg') fixed repeat; margin:0px; padding:0px;">
 
<img src="asus_logo.gif"  width="152" height="62">
<b><h1><center><FONT COLOR="blue"> Сервевісний центр Asus </I></FONT></b></h1> </center>
<form><br><b> Заповніть форму та вкажіть поломку  </b>
<br>
<br><input type="text==0" size="40" value="Введіть логін" maxlength="30">
<br><input type="text" size="40" value="Введіть ім'я" maxlength="30">
<br><input type="text" size="40" value="Введіть прізвище" maxlength="10">
<br>
<br> <font color="white">Вкажіть вашу стать:
<br>
<input type ="radio" name = "nbn"> жіноча <br>
<input type ="radio" name = "nbn"> чоловіча <br>
 
<br><font color="white">Вкажіть вашу країну
<select name="option">
<option> Україна 
</select>
<br>
<br><font color="white">Вкажіть ваше місто
<select name="option">
<option> Київ
<option> Харків
<option> Чернівці
<option> Львів
<option> Рівне
<option> Донецьк
<option> Хмельницький
</select>
<br>
<br><font color="white">Вкажіть серію ноутбука asus
<select name="option">
<option> Premium Premium 
<option> Deluxe Deluxe 
<option> -E Enhanced 
<option> PRO Professional 
<option> (non) Standard 
<option> SE Second Edition
<option> SE2 Second Edition 2
<option> DO Digitale Office 
</select>
 
 
<br>Вкажіть модель ноутбука asus
<select name="option">
<option>Asus A3500H
<option>Asus A3500l
<option>Asus A3Ac
<option>Asus A3Fc
<option>Asus A3Vc
<option>Asus A6Ja
<option>Asus A6Jc
<option>Asus A6Km
<option>Asus A6Kt
<option>Asus A6M
<option>Asus A6R
<option>Asus A6Rp
<option>Asus A6Tc
<option>Asus A6U
<option>Asus A6Vm
<option>Asus A7J
<option>Asus A7Jb
<option>Asus A7M
<option>Asus A7S
<option>Asus A7Sn
<option>Asus A7Sv
<option>Asus A7U
<option>Asus A8Jp
<option>Asus A8Sc
<option>Asus A8Sr
<option>Asus A9500Rp
<option>Asus Bamboo U2B
<option>Asus Bamboo U6V
<option>Asus C90S
</select>
<br>
<h><font color="white">Вкажіть ваші помилки</h> <br>
<input type ="checkbox" name = "nbn"> KERNEL_DATA_INPAGE_ERROR <br>
<input type ="checkbox" name = "nbn"> MISMATCHED_HAL <br>
<input type ="checkbox" name = "nbn"> NTFS_FILE_SYSTEM<br>
<input type ="checkbox" name = "nbn"> INACCESSIBLE_BOOT_DEVICE <br>
<input type ="checkbox" name = "nbn"> UNEXPECTED_KERNEL_MODE_TRAP<br>
<br>
<br>Вкажіть вашу помилку
<select name="option">
<option> STATUS_IMAGE_CHECKSUM_MISMATCH
<option> STATUS_SYSTEM_PROCESS_TERMINATED
<option> UNEXPECTED_KERNEL_MODE_TRAP
<option> INACCESSIBLE_BOOT_DEVICE
<option> NTFS_FILE_SYSTEM
<option>NTFS_FILE_SYSTEM
<option>MISMATCHED_HAL
<option>KERNEL_DATA_INPAGE_ERROR
</select>
 
<br>
<input type="submit" value="Готово">
<input type="reset" value="Скинути">
</br>
</form>
</body>
</html>

@JsLoveR · 13.12.2012, 02:45

rockRainbow, для любых text, password, textarea, select, radio, checkbox, главное, чтобы они все были в тэге form:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var errorList = [];
function checkInputs(){
    check("text", "value");
    check("password", "value");
    check("textarea", "value");
    check("select-one", "value");
    check("radio", "checked");
    check("checkbox", "checked");
    
    if(errorList.length == 0){
        alert("Всё впорядке, можно отсылать!");
        return true;
    }
    else {
        alert("Обнаружены ошибки:\n\n " + errorList);
        errorList = [] ;
        return false;
    }
}
 
function check(type, prop){
    var inputs = document.getElementsByTagName("form")[0];
    for(var i = 0; i < inputs.length; i++){
        if(inputs[i].type == type && prop == "value"){
            if(inputs[i].value == "" ){
                errorList.push(" Не заполнен " + inputs[i].type + "!");
            }
        }
        else if(inputs[i].type == type && prop == "checked"){
            if(!inputs[i].checked){
                errorList.push(" Не выбран " + inputs[i].type + "!");
            }
        }
    }
}
</script>
</head>
 
<body>
<form>
    <input type="text"/>
    <input type="text"/>
    <input type="password"/>
    <textarea></textarea>
    <textarea></textarea>
    <input type="checkbox"/>
    <input type="radio"/>
    <input type="checkbox"/>
    <input type="radio"/>
    <select>
        <option></option>
        <option>1</option>
        <option>2</option>
    </select>
    <select>
        <option></option>
        <option>1</option>
        <option>2</option>
    </select>
    <br/>
    <br/>
    <input type="button" value="Проверить" onclick="checkInputs();"/>
</form>
</body>
</html>

@kalabuni · 13.12.2012, 04:33

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

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

1) "все формы" проверять незачем, ибо форма у вас всего одна
потому что форма - это теги <form></form> и всё, что внутри них

2) проверять, если вам это надо, можно значения полей формы (или элементов формы),
т.е. значения всех <input>'ов, <select>'ов и <textarea> внутри формы

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

а именно:
-- у текстовых полей (для ввода логина, имени и фамилии) отсутствует атрибут NAME,
а без этого атрибута значения полей при сабмите формы не отправятся...
так что смысла проверять эти поля никакого нет... проверяй-не проверяй - эти данные никому не нужны

-- проверить "отмеченность" группы радиокнопок и группы чекбоксов в вашем коде НЕЛЬЗЯ по двум причинам:
во-первых, вы двум разным группам дали одно имя (name="nbn"), а должны быть два разных имени для двух разных групп
во-вторых, у всех радиокнопок и чекбоксов нет обязательного атрибута VALUE

-- проверить "выбор" во всех ваших <select>'ах тоже НЕЛЬЗЯ
по трём причинам:
во-первых, у всех ваших <select>'ов одно и то же имя name="option", а должны быть разные
во-вторых, во всех ваших <select>'ах во всех тегах <option> нет обязательного атрибута VALUE
в-третьих, во всех ваших <select>'ах нет первого "приглашающего" <option>'а, потому нельзя узнать - сам ли юзер выбрал первый <option> или вообще не смотрел на эти ваши <select>'ы
-----------

в общем, проверку вашей формы я выполнил
вывод: форму ключница делала; никуда не годится

Новые блоги и статьи Все статьи Все блоги /
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .