Форма обратного звонка с валидацией на AJAX

Суть
Форма обратной связи. Отправляет данные на почту. В дополнение к ней идет немного скриптов для валидации и AJAX для дружелюбного интерфейса. За основу взята форма из примера в саппорте InSales, выкинуто не слишком нужное и добавлено нужное.
HTML
{% if settings.show_form %}
<div class="grid_6 form">
<form id="feedback_form" class="contact" action="/client_account/feedback" method="post" role="form">
<h2>Быстрый контакт</h2>
<div class="name">
<input type="text" name="feedback[name]" value="" class="required" placeholder="Имя">
</div><!-- .name -->
<div class="email" >
<input id="maill" type="email" name="feedback[from]" value="" class="required" placeholder="E-mail">
</div><!-- .email -->
<div class="phone">
<input type="text" name="feedback[phone]" value="" placeholder="Телефон">
</div><!-- .phone -->
<div class="comment">
<textarea name="feedback[content]" class="required" placeholder="Комментарий"></textarea>
</div><!-- .comment -->
<div class="errorcont"><i class="errors"></i></div>
<div class="submit">
<a href="#" class="button" onclick="document.getElementById('fast-call_submit').click(); return false;">Отправить</a>
<input type="hidden" id="fast-call_submit" value="Отправить">
</div><!-- .submit -->
</form><!-- .contact -->
</div><!-- .grid_6 -->
{% endif %}
Поля, доступные в движке магазина и используемые в форме:
feedback[from] — E-mail
feedback[content] — Сообщение
feedback[name] — Имя пользователя
feedback[phone] — Телефон
Стили добавляются по вкусу в соответствии с дизайном и фантазией.
Магия
<script type="text/javascript">
function validateEmail(email) {
var re = /\S+@\S+\.\S+/;
return re.test(email);
}
$(document).ready(function(){
var modCallMeBack = $(".form");
/* CallMeBack */
$("#fast-call_submit", modCallMeBack).bind("click",function(e){
e.preventDefault();
var is_error = false;
// проверка на дефолт
$("input.required, textarea.required", modCallMeBack).each( function(){
if(this.value==this.defaultValue){
is_error = true;
$(this).css("background","rgba(255, 0, 0, 0.2)");
}
else
{
$(this).css("background","#fff");
}
});
if (validateEmail($('#maill').val())) {
$('#maill').css("background","#fff");
}
else
{
$('#maill').css("background","rgba(255, 0, 0, 0.2)");
is_error = true;
}
if(is_error == true) {
$('.form .errors').html('Не все поля заполнены правильно!');
return
}
var form = $('#feedback_form',modCallMeBack);
var fields = form.serialize();
$.ajax({
url: form.attr('action') + '.json',
type: 'post',
data: fields,
dataType: 'json',
complete: function() { },
success: function(response) {
if ( response.status == 'ok' ) {
$('.form .errors').html('Сообщение отправлено!');
} else {
$('.form .errors').html('Ошибка!');
}
}
});
});
});
</script>
Суть всей магии довольно проста.
При нажатии на кнопку, создается переменная is_error, которая сигнализирует об ошибках в заполнении. Сначала проверяется, заполнены ли поля вообще, и если нет то пустое поле становится красным. Что важно, поле становится белым, если оно успешно проходит проверку, потому что используется AJAX и страница не перезагружается при отправке.
Валидация почты осуществляется функцией validateEmail и точно так же раскрашивает поля в разные цвета при ошибке. Аналогичную функцию можно прописать и для поля телефона. Проверочная строка может выглядеть вот так:
var re = /^\d{10}$/;
Если есть ошибки — выводим надпись о том, что они есть и прерываем выполнение скрипта, а цвета полей подскажут что нужно исправить.
Далее все завершает AJAX. Поля формы преобразуются в json и отправляются на сервер. Письмо отправлено, все довольны. Для подтверждения общей довольности выводим надпись об успешности отправки. На всякий случай предусматриваем возможность написать об ошибке.
1 комментарий
А сообщение об ошибках лучше брать их ответов сервера — там все более конкретно — указано какое именно поле не так заполнено или что е-мейл не похож на е-мейл.