Toast.js

@Kristofkadavr · Регистрация: 29.03.2016

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

Приветствую.
Столкнулся с такой проблемой:
Есть страница, на ней n-количество полей для ввода.
Есть кнопка "сформировать таблицу" которая POST методом отсылает введенные в поля данные в php сценарий для дальней обработки и вывода. Все это работает.
Далее я решил сделать проверку на заполненность полей, дабы пользователь не отправлял пустые данные. Изначально сделал это через следующий код на javascript:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
function validate_form ( )
{
  valid = true;
 
        if ( document.main_form.subject.value == "" )
        {
                alert ( "Пожалуйста, заполните поле 'Заголовок письма'." );
                valid = false;
        }
 
         if ( document.main_form.description.value == "" )
        {
                alert ( "Пожалуйста, заполните поле 'Описание проблемы'." );
                valid = false;
        }
 
        return valid;
}
 
</script>

соответственно, присвоил форме событие onsubmit:

HTML5
1
2
3
4
<form method="post" action="get_table.php" name="main_form" onsubmit="return validate_form ( );">  
...
<button type="submit" class="btn btn-success btn-block" id="toster">Сформировать таблицу
</button> <!--кнопка, отправляющая данные в php сценарий. -->

Все работает, как должно.
Но недавно я познакомился с toastr.js, который мне очень понравился. И я решил избавится от некрасивых alert ов и заменить их на тостер.
что я сделал?
Сначала подключил все нужное в <head>:

HTML5
1
2
   <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
   <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">

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

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
<script type="text/javascript">
function validate_form ( )
{
  valid = true;
 
        if ( document.main_form.subject.value == "" )
        {
                $("#toster").click(function(){
                toastr["warning"]("Заполните все поля!", "Внимание!") 
                });
                valid = false;
        }
 
         if ( document.main_form.description.value == "" )
        {
                $("#toster").click(function(){
                toastr["warning"]("Заполните все поля!", "Внимание!")
                });
                valid = false;
        }
 
        return valid;
}
</script>

и вот тут начались проблемы - во первых, кнопка подтверждения срабатывала, но только после второго и далее нажатий (на первое вообще не реагирует). И выдает со второго и далее нажатий сразу по два оповещения. Почему так - я понимаю - проверяется заполненность двух полей для ввода. Но даже когда я заполняю любое одно - все равно процесс начинается со второго нажатия, но оповещение уже одно.
Решил объединить два условия в одно, вышло следующее:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<SCRIPT type="text/javascript">
 
function validate_form ( )
{
  valid = true;
 
        if ( document.main_form.subject.value == "" ) || ( document.main_form.description.value == "" )
        { 
                $("#toster").click(function(){
                toastr["warning"]("Заполните все поля!", "Внимание!") 
                });
                valid = false;
        }
 
        return valid;
}
 
</SCRIPT>

Вот тут уже все окончательно сломалось, проверка формы не работает, сразу отсылает к php сценарию. Не посоветуете, в чем может быть дело?

@j2FunOnly · 26.07.2017, 11:42

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
<script type="text/javascript">
function validate_form ( )
{
  // незачем сорить в глобальную область
  var valid = true;
 
        if ( document.main_form.subject.value == "" )
        {
                // $("#toster").click(function(){
                toastr["warning"]("Заполните все поля!", "Внимание!") 
                // });
                valid = false;
        }
 
         if ( document.main_form.description.value == "" )
        {
                // $("#toster").click(function(){
                toastr["warning"]("Заполните все поля!", "Внимание!")
                // });
                valid = false;
        }
 
        return valid;
}
</script>

Вы по сабмиту формы добавляете обработчик события клика по элементу #toster, наверняка это type="submit". Следовательно при первом клике добавится функция показа сообщения. При втором покажется сообщение и добавится еще одна функция показа и т. д.

Добавлено через 2 минуты
По второму. Ошибка синтаксиса, в скобочках запутались. И то же самое с кликом.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<SCRIPT type="text/javascript">
 
function validate_form ( )
{
  var valid = true;
 
        // if ( document.main_form.subject.value == "" ) || ( document.main_form.description.value == "" )
        if ( document.main_form.subject.value == ""  || document.main_form.description.value == "" )
        { 
                // $("#toster").click(function(){
                // toastr["warning"]("Заполните все поля!", "Внимание!") 
                toastr.warning("Заполните все поля!", "Внимание!"); // читабельность
                // });
                valid = false;
        }
 
        return valid;
}
 
</SCRIPT>

@skelmen · 26.07.2017, 12:25

У вас ошибка в синтаксисе, скобочки должны так:

JavaScript
1
if ( document.main_form.subject.value == ""  || document.main_form.description.value == "" )

@Kristofkadavr · 26.07.2017, 12:31 **[ТС]**

Огромное вам спасибо!

@Kristofkadavr · 26.07.2017, 19:05 **[ТС]**

Спасибо большое за ваш ответ.

Добавлено через 6 часов 34 минуты
не подскажите, как тогда проверить еще, выбрана ли хоть какая то радио кнопка для этого? у меня их три, имя у каждой
name="radioSystem[]" , имя формы "main_form"(именно так, с квадратными скобками, это нужно для дальнейшей обработки данного массива в php.

почему то такой код не работает.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function validate_form ( )
{
  var valid = true;
 
 
        if (  (document.main_form.radioGroup[0].checked == false ) &&(document.main_form.radioGroup[1].checked == false )  && (document.main_form.radioGroup[3].checked == false ) )
        { 
                
                toastr.warning("Заполните систему!", "Внимание!"); // читабельность
                valid = false;
        }
 
 
        return valid; 
 
}

@j2FunOnly · 27.07.2017, 09:51

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

это нужно для дальнейшей обработки данного массива

Значит у каждой радио кнопки есть value

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function validate_form ( )
{
  var valid = true;
 
 
        // if (  (document.main_form.radioGroup[0].checked == false ) &&(document.main_form.radioGroup[1].checked == false )  && (document.main_form.radioGroup[3].checked == false ) )
       if (document.main_form['radioSystem[]'].value == '')
        { 
                
                toastr.warning("Заполните систему!", "Внимание!"); // читабельность
                valid = false;
        }
 
 
        return valid; 
 
}

@Kristofkadavr · 28.07.2017, 09:44 **[ТС]**

Спасибо огромное! То что надо!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии 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(), которая. . .

Toast.js

Решение

Решение

@Kristofkadavr 0 / 0 / 1 Регистрация: 29.03.2016 Сообщений: 50
	26.07.2017, 12:31 [ТС]
	Огромное вам спасибо! 0

@Kristofkadavr 0 / 0 / 1 Регистрация: 29.03.2016 Сообщений: 50
	28.07.2017, 09:44 [ТС]
	Спасибо огромное! То что надо! 0