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>'ы
-----------

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

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .