Проврка полей формы перед отправкой на сервер

@erikk · Регистрация: 23.03.2014

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

Нужно проветить форму на наличие пустых полей. Если найдено пустое поле, название поля выделяется красным и вверху формы выводится сообщение об ошибке.

В случае возникновения ошибок во время валидации полей формы форма не должна отправляться на обработку на сервер, а пользователь должен видеть сообщения об ошибках валидации, выведенные в качестве содержимого HTML-страницы. Если проходит валидацию - отправить на сервер.

У меня в любом случает отправляет данные на сервер. Не могу понять, почему так

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
<!DOCTYPE html>
<html>
<head>
<title>Справочник лекарств</title>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="formaFunctions.js"></script>
</head>
    <body>
        
        <h2>Справочник лекарств</h2>
        <div id="error"></div>
        <div id="error2"></div>
        <form name="myForm" 
            action="http://10.12.53.159:8111/stud" 
            onsubmit="return validateForm()" 
            method="post">
            
            <table border="2">
            <tr>
                <td>Название:</td>
                <td><input type="text" name="fname"></td>
            </tr>
            <tr><td>Производитель:</td>
                <td><input type="text" name="production"></td>
            </tr>
            <tr><td>Форма выпуска:</td>
                <td><select name="prodForm">
                    <option>Порошок</option>
                    <option>Таблетки</option>
                    <option>Драже</option>
                    <option>Раствор</option>
                    <option>Мазь</option>
                </select></td>
            </tr>
            </table>
            <p><input type="submit" value="Поиск" /></p>
        </form>
        
    </body>
</html>

Файл formaFunctions.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function validateForm(){
    var n = document.forms["myForm"]["fname"].value;
    var p = document.forms["myForm"]["production"].value;
    if(n==null||n==""){
        document.getElementsByName('fname').style.color="red";
        document.getElementById('error').innerHTML="Не задано название лекарственного препарата!";
        return false;
    }
    if(p==null||p==""){
        document.getElementsByName('production').style.color="red";
        document.getElementById('error2').innerHTML="Не задан производитель лекарственного препарата!";
        return false;
    }
    return true;
}

@Shakalaka · 18.04.2015, 19:26

document.getElementsByName('fname') - возвращает коллекцию элементов с именем 'fname'.
нужно обращаться к конкретному элементу document.getElementsByName('fname')[0]. Ну или в цикле пробежать и каждому задать стиль

@Lazy_Den · 18.04.2015, 19:26

erikk, из <form> уберите onsubmit="return validateForm()", код разместите или в конце страницы, или установить обработчик события загрузки страницы.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
function validateForm(e) {
    var formElems = this.elements,
        i = 0,
        empty = false;
    for (; i < formElems.length; i++) {
        if (formElems[i].value.trim() === '') {
            formElems[i].style.backgroundColor = '#ffbfbf';
            empty = true;
        }
    }
    if(empty) e.preventDefault();
}
myForm.addEventListener('submit', validateForm, false);

@erikk · 18.04.2015, 19:38 **[ТС]**

Shakalaka, действительно помогло. Спасибо!)

Добавлено через 12 секунд
Lazy_Den, спасибо за вариант)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии 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. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	18.04.2015, 19:26
	document.getElementsByName('fname') - возвращает коллекцию элементов с именем 'fname'. нужно обращаться к конкретному элементу document.getElementsByName('fname')[0]. Ну или в цикле пробежать и каждому задать стиль 0

@erikk 0 / 0 / 0 Регистрация: 23.03.2014 Сообщений: 6
	18.04.2015, 19:38 [ТС]
	Shakalaka, действительно помогло. Спасибо!) Добавлено через 12 секунд Lazy_Den, спасибо за вариант) 0