Не работает событие onsubmit у формы

@zeva · Регистрация: 18.12.2011

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

Доброе утро! Дело вроде простое. Но не могу понять почему у меня не срабатывает скрипт на событие отправки формы.
Вот форма:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<form method="post" action="" id="ordercoll" onsubmit="return validateCollForm()">
            <label>Имя:<span class="asterisk"> *</span></label>
            <input type="text" name="sender_name" value="" class="name rfield"/>
            
            <label>Ваш город:</label>
            <input type="text" name="sender_city" value=""/>
            
            <label>Номер телефона:<span class="asterisk"> *</span></label>
            <input type="text" name="sender_phone" value="" class="phone rfield"/>
             
            <input type="submit" name="send_orderphone" value="Заказать обратный звонок">
</form>

По событию onsubmit делаю проверку полей на заполненность, если поле не заполнено форма не отправляется.

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
<script>
    function validateCollForm()
    {
        err = '';
    
        if($('#ordercoll').find('input[name="sender_name"]').val() == '')
        {
            err = 'Вы не указали своё имя';
            alert(err);
        }
    
        if($('#ordercoll').find('input[name="sender_phone"]').val() == '')
        {
            err = "Вы не оставили свой телефон";
            alert(err);
        }
    
        if(err != '')
        {
            $('#error').html(err);
            return false;
        }
        if(err == '')
        {
            alert("Спасибо. Ваш заказ принят. Мы свяжемся с Вами в ближайшее время.");
        }
    }
</script>

В результате проверки полей не происходит и форма отправляется всегда.

P.S. На этой же странице расположена другая форма, на ней событие срабатывает и происходит проверка. Не пойму в чем дело. Подскажите, пожалуйста.

@Lazy_Den · 03.10.2014, 11:07

Использовать onclick внутри html-тегов - это плохая практика. Убираете из тега <form> onsubmit="return validateCollForm()" и дописываете следующее в js, сразу после функции:

JavaScript
1
2
3
$(function(){
    $('#ordercoll').on('submit', validateCollForm);
});

Внутри функции такие маленькие изменения

JavaScript
1
2
3
4
function validateCollForm(e) {
   e.preventDefault(); // для отмены события
   /* остальное без изменений */
}

Добавлено через 5 минут
Хотя мини-рефакторинг можно и в функции сделать:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function validateCollForm(e){
    var err = false,
        $that = $(this);
    if($.trim($('input[name="sender_name"]', $that).val()) == '') {
        err = 'Вы не указали своё имя';
    }
    if($.trim($('input[name="sender_phone"]', $that).val()) == '') {
        err += "<br>Вы не оставили свой телефон";
    }
    if(!err) {
        alert("Спасибо. Ваш заказ принят. Мы свяжемся с Вами в ближайшее время.");
    } else {
        e.preventDefault();
        $('#error').html(err);
    }
}

@zeva · 03.10.2014, 15:07 **[ТС]**

Все сделала. Результат тот же. Заметила одну странность: в инспекторе нет вообще тега <form></form>. Только поля. Как такое может быть? Это скрипт так повлиял?

Добавлено через 17 минут
Перенесла код в другое место, все теги появились. Но проверки полей так и не происходит. Сразу отправляет.

@Lazy_Den · 03.10.2014, 15:13

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

в инспекторе нет вообще тега <form></form>

Значит нужно обращаться непосредственно к полям формы. Пробуйте так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function validateCollForm(e){
    var err = false;
    if($.trim($('input[name="sender_name"]').val()) == '') {
        err = 'Вы не указали своё имя';
    }
    if($.trim($('input[name="sender_phone"]').val()) == '') {
        err += "<br>Вы не оставили свой телефон";
    }
    if(!err) {
        alert("Спасибо. Ваш заказ принят. Мы свяжемся с Вами в ближайшее время.");
    } else {
        e.preventDefault();
        $('#error').html(err);
    }
}

Добавлено через 3 минуты

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

Перенесла код в другое место, все теги появились.

Вы меня окончательно запутали...

Добавлено через 1 минуту
Вы используете какой-то фреймворк? Точно ли подключена библиотека jQuery? Консоль открыта? Если да, то есть ли ошибки? Если нет, то откройте её и проверьте.

@zeva · 03.10.2014, 15:27 **[ТС]**

Фрейм не использую. Я пока сама не пойму почему теги в том месте пропадают. Впервые такое вижу. Вставила код на другую страничку и теги все на месте. Но код ваш не работает. Сейчас у меня так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<button id="orderphone_form_show" class="java-forms-show"><i class="icon order_coll"></i>Заказ по телефону</button>
<div id="orderphone_form" class="java-forms">
    <div class="form-title">Заказ обратного звонка</div>
    <form method="post" action="" id="ordercoll">
            <label>Имя:<span class="asterisk"> *</span></label>
            <input type="text" name="sender_name" value="" class="name rfield"/>
            
            <label>Ваш город:</label>
            <input type="text" name="sender_city" value=""/>
            
            <label>Номер телефона:<span class="asterisk"> *</span></label>
            <input type="text" name="sender_phone" value="" class="phone rfield"/>
             
            <input type="submit" name="send_orderphone" value="Заказать обратный звонок">
    </form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
    function validateCollForm(e){
    var err = false,
        $that = $(this);
    if($.trim($('input[name="sender_name"]', $that).val()) == '') {
        err = 'Вы не указали своё имя';
    }
    if($.trim($('input[name="sender_phone"]', $that).val()) == '') {
        err += "<br>Вы не оставили свой телефон";
    }
    if(!err) {
        alert("Спасибо. Ваш заказ принят. Мы свяжемся с Вами в ближайшее время.");
    } else {
        e.preventDefault();
        $('#error').html(err);
    }
    }
    
    $(function(){
        $('#ordercoll').on('submit', validateCollForm);
    });
</script>

PHP
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
<? 
        if($_POST['send_orderphone']) { 
            if (isset($_POST['sender_name'])) 
            {
                $name = $_POST['sender_name']; 
                if ($name == '') 
                {
                    unset($name);
                }
            }
            if (isset($_POST['sender_city'])) 
            {
                $city = $_POST['sender_city']; 
                if ($city == '') 
                {
                    unset($city);
                }
            }
            if (isset($_POST['sender_phone'])) 
            {
                $number = $_POST['sender_phone']; 
                if ($phone == '') 
                {
                    unset($phone);
                }
            }
            
            /* Убираем все лишние пробелы, а также преобразуем все теги HTML в символы*/
            $name = htmlspecialchars(trim($name));
            $phone = htmlspecialchars(trim($number));
            $city = htmlspecialchars(trim($city));
 
            /* Формируем сообщение */
            $address = "zeva182@yandex.ru";
            $sub = "Заказ обратного звонка";
   
            $date = "Дата: ".date("d-m-Y (H:i:s)",time()-3600*8);
            $mes = "Имя: $name \nТелефон: $phone \n$date \nГород: $city";
            /* Отправка сообщения */
            $verify = mail ($address,$sub,$mes,"Content-type:text/plain; charset = utf-8");
            header('Location:'.$_SERVER['REQUEST_URI'].'');
        } 
        ?>

Консоль дает такие ошибки:
ReferenceError: $ is not defined zapchasti-i-raskhodniki:259
ReferenceError: $ is not defined zapchasti-i-raskhodniki:463
Error: Permission denied to access property 'toString'
Метод getPreventDefault() является устаревшим. Для его замены используйте метод defaultPrevented. jquery-1.8.3.min.js:2
Синхронный XMLHttpRequest в основной нити является устаревшим из-за его пагубного влияния на работу конечного пользователя. Для получения дополнительной помощи обратитесь к http://xhr.spec.whatwg.org/

@Lazy_Den · 03.10.2014, 16:23

Вообще-то, ошибка "ReferenceError: $ is not defined" указывает на то, что библиотека jQuery не подключена.
Или же подключена, но уже после того, где она требуется. А должна она быть в самом начале.

@Клевер · 03.10.2014, 16:45

Не туда, извините.

@zeva · 06.10.2014, 11:49 **[ТС]**

Перенесла подключение библиотеки в шапку. Ошибок нет, код не работает.

Добавлено через 4 минуты
Извиняюсь, частично заработала) При пустых полях форма не отправляется. Но не появляется окошка с сообщением о том какие поля не заполнены.

Добавлено через 2 часа 48 минут
Разобралась со всем. Спасибо огромное за помощь!

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@zeva 1 / 1 / 0 Регистрация: 18.12.2011 Сообщений: 105
	03.10.2014, 15:07 [ТС]
	Все сделала. Результат тот же. Заметила одну странность: в инспекторе нет вообще тега <form></form>. Только поля. Как такое может быть? Это скрипт так повлиял? Добавлено через 17 минут Перенесла код в другое место, все теги появились. Но проверки полей так и не происходит. Сразу отправляет. 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	03.10.2014, 16:23
	Вообще-то, ошибка "ReferenceError: $ is not defined" указывает на то, что библиотека jQuery не подключена. Или же подключена, но уже после того, где она требуется. А должна она быть в самом начале. 0

@Клевер 0 / 0 / 0 Регистрация: 02.10.2014 Сообщений: 10
	03.10.2014, 16:45
	Не туда, извините. 0

@zeva 1 / 1 / 0 Регистрация: 18.12.2011 Сообщений: 105
	06.10.2014, 11:49 [ТС]
	Перенесла подключение библиотеки в шапку. Ошибок нет, код не работает. Добавлено через 4 минуты Извиняюсь, частично заработала) При пустых полях форма не отправляется. Но не появляется окошка с сообщением о том какие поля не заполнены. Добавлено через 2 часа 48 минут Разобралась со всем. Спасибо огромное за помощь! 0

Не работает событие onsubmit у формы

Решение