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-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

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