Обратная связь на Javascript

ГлавнаяJava скрипты → Обратная связь на Javascript

В этом примере мы рассмотрим обратная связь на Javascript и добавим к уже имеющейся у нас форме обратной связи - javascript, с помощью которого, ошибки введённые пользователем в форму, будут показываться в модальном окне.

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


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

В том случае, если у пользователя в браузере будет отключён параметр "Javascript", то у нас в этом случае сработает защита в PHP скрипте, которую мы с Вами рассматривали на предыдущей странице.
И поэтому настоятельно НЕ РЕКОМЕНДУЮ оставлять только защиту с JavaScript.

Код JavaScript для вывода ошибок в модальном окне


<script type="text/javascript">  
function f_submit() {
 var posName = document.getElementById("posName");
 var posEmail = document.getElementById("posEmail");
 posName.style.backgroundColor = "#FFFFFF";
 posEmail.style.backgroundColor = "#FFFFFF";
        
 var p = /[А-Яа-я]/i;
 var Str = posName.value;
 if (!p.test(Str)) {
 window.alert("Имя содержит только русские буквы!");
 posName.style.backgroundColor = "#FFE4E1";
 posName.select();
 return false;
}
 p = /^[a-z0-9_\.\-]+@([a-z0-9\-]+\.)+[a-z]{2,6}$/i;
 Str = posEmail.value;
 if (!p.test(Str)) {
 window.alert("Не правильный формат E-mail адреса!");
 posEmail.style.backgroundColor = "#FFE4E1";
 posEmail.select();
 return false;
 }
} 
</script>

Где в первом абзаце Вы указываете в backgroundColor цвет фона полей при обычном состояние, а в последующих цвет фона полей при ошибках.

И здесь же, в этом скрипте, Вы каждый под себя изменяете защиту каждого поля для вводимых данных, изменяете выводимые сообщения, а так же добавляете новые.

Поделись ссылкой с друзьями:

Комментарии к статье