Форма обратной связи

@blrik · Регистрация: 14.03.2014

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

Добрый день, у меня есть скрипт формы обратной связи, подскажите, можете подсказать, как сделать так, чтобы ошибки выводились не в alert? с как-нибудь динамически на странице?

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
29
30
31
32
33
34
35
36
37
<script type="text/javascript">
function provGuest() {
obj_form=document.forms.Guest;
obj_pole_name =obj_form.name;
obj_pole_email =obj_form.email;
obj_pole_message =obj_form.message;
 
if (obj_pole_name.value==""){
alert ("Напишите свое имя!"); 
return;
}
txt = obj_pole_email.value;
if (txt==""){
alert ("Напишите Ваш E-mail!");
return;
}
if (txt.indexOf("@") == -1) {
alert("Введите корректный E-mail типа [email]name@mail.ru[/email]"); 
return; 
} 
if (txt.indexOf(".") == -1) {
alert("Введите корректный E-mail типа [email]name@mail.ru[/email]"); 
return; 
} 
textMessage=obj_pole_message.value;
if (textMessage==""){ 
alert ("Напишите сообщение!");
return;
} 
if (textMessage.length<10){
alert ("Длина сообщения должна быть не менее 10 символов");
return;
}
 
obj_form.submit();
}
</script>

@Razip · 08.06.2014, 11:58

Решил не мелочиться и написать целый тип FormWarning, который осуществляет отображение всех предупреждений в необходимом элементе (предполагается что это специальный <div> для предупреждающих сообщений).

Тип имеет два метода — добавление сообщения и отчистку поля с предупреждениями (полезно очищать поле когда запускается функция валидации вновь). Для того чтобы начать работу с типом, нужно создать его экземпляр, передавая параметры конструктору FormWarning. Первый параметр конструктора — элемент, в который нужно вставлять сообщения, второй параметр — функция-обертка (callback, анонимная функция), которой будет передан текст предупреждения и ожидается что она вернет строку (эту возможность можно использовать для «оборачивания» текста предупреждения в какой-либо элемент (показано в примере)).

Итак, код JS-типа:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
/**
 * @type {{showWarning: showWarning}}
 */
FormWarning.prototype = {
    show: function (warning) {
        try {
            var returnedValue = this.wrapperFunction(warning);
 
            if (!typeof result === 'string') {
                throw 'Not correct returned type of anonymous function!';
            }
 
            this.contentElement.innerHTML += returnedValue;
        } catch (e) {
            alert(e);
        }
    },
    clean: function () {
        this.contentElement.innerHTML = null;
    }
};
 
function FormWarning(contentElement, wrapperFunction) {
    try {
        if (arguments < 2 || arguments > 2) {
            throw 'Not correct arguments for WarningForm constructor function!';
        }
 
        if (!typeof contentElement === 'object' || !typeof wrapperFunction === 'function') {
            throw 'Not correct arguments types!';
        }
 
    } catch (e) {
        alert(e);
    }
 
    // _________________
 
    this.contentElement = contentElement;
    this.wrapperFunction = wrapperFunction;
}

Пример использования: http://jsfiddle.net/mP8Q4/3/.

@alexsamos33 · 08.06.2014, 23:16

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
29
30
31
32
33
34
<script type="text/javascript">
function provGuest() {
obj_output_div=document.getElementById('output1');
obj_form=document.forms.Guest;
obj_pole_name =obj_form.name;
obj_pole_email =obj_form.email;
obj_pole_message =obj_form.message;
*
if (obj_pole_name.value==""){
obj_output_div.innerHTML = "Напишите свое имя!"; 
return;
}
txt = obj_pole_email.value;
if (txt==""){
obj_output_div.innerHTML = "Напишите Ваш E-mail!";
return;
}
if ((txt.indexOf("@") == -1) || (txt.indexOf(".") == -1)) {
obj_output_div.innerHTML = "Введите корректный E-mail типа [email]name@mail.ru[/email]"; 
return; 
} 
textMessage=obj_pole_message.value;
if (textMessage==""){ 
obj_output_div.innerHTML = "Напишите сообщение!";
return;
} 
if (textMessage.length<10){
obj_output_div.innerHTML = "Длина сообщения должна быть не менее 10 символов";
return;
}
*
obj_form.submit();
}
</script>

HTML5
1
<div id="output1"></div>

Новые блоги и статьи Все статьи Все блоги /
Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	Программный отбор значений справочника Maks 21.03.2026 Установка программного отбора значений справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит предопределенное значение перечислений. Процедура. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .