Контакт форма с AJAX и JQuery validate

Автор: IzKuFeLiQqQqQ

Здравейте като малко упражнение реших да си създам контакт форма, но малко по разчупена и реших да комбинирам AJAX post функцията с JQuery validate. Направих 2 файла един с формата и JQuery-то и един за пращането на email-a.

Ето какво се получи:

form.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-1.5.2.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<title>Контакт форма с AJAX</title>
<style type="text/css">
label {width: 100px; float: left;}
label.error { float: none; color: red; padding-left: 10px; vertical-align: top; }
p { clear: both; }
</style>
<script>
$(function(){
jQuery.extend(jQuery.validator.messages, {
required: "Това поле е задължително!",
remote: "Поправете полето!",
email: "Въведете валиден email адрес",
url: "Въведете валиден URL",
date: "Въведете валидна дата!",
dateISO: "Въведете валидна дата (ISO)!",
dateDE: "Bitte geben Sie ein g&#252;ltiges Datum ein.",
number: "Въведете валиден номер!",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Въведете същатата стойност",
accept: "Please enter a value with a valid extension.",
maxlength: $.format("Въведете не повече от {0} символа."),
minlength: $.format("Въведете поне {0} символа."),
rangelength: $.format("Въведете между {0} и {1} символа."),
range: $.format("Въведете между {0} и {1} символа."),
max: $.format("Въведете по-малко или точно {0} символа."),
min: $.format("Въведете повече или точно {0} символа.")
}); //промяна на error съобщенията

$("#contact").validate({
submitHandler: function(){//създаване на функция при валидна форма и при натискането на submit бутона
var name = $("#name").val();
var email = $("#email").val();
var subject = $("#subject").val();
var message = $("#message").val();//вземане на стойностите на полетата
$("<img src='http://www.floen.com/ATOM/weather/loading.gif'/>").appendTo('#res');//изкарване на load bar преди да излезе съобщението от post.php(по надолу ще го видите)
$.ajax({ //пращаме данните
url: "post.php", //файла към който пращаме
type: "POST",
data: "name=" + name + "&email=" + email + "&subject=" + subject + "&message=" + message, // имената и стойностите на това което пращаме
success: function(res){ //при успешно изпращане на данните създаваме функция
if(res!="Грешка при изпращането! Опитайте отново!" OR res!="Грешка празни стойности на полетата!") {$("#contact").toggle("slow");}//ако post.php НЕ върне съобщението за грешка формата ще се скрие
$("#res").hide().text(res).fadeIn("slow");//заменя load bar-а с върнатото от post.php
}
});
return false;
}
});
});
</script>

</head>
<body>


<form id="contact" method="post" action="post.php">
<p>
<label for="name">Име</label>
<input id="name" name="name" size="25" class="required"/>
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email" size="25" class="required email" />
</p>
<p>
<label for="subject">Отностно</label>
<input id="subject" name="subject" size="25" class="required" />
</p>
<p>
<label for="message">Съобщение</label>
<textarea id="message" name="message" cols="22" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Прати"/>
</p>
</form>
<div id="res"></div>//в този див се извеждат резултатите
</body>
</html>

post.php

<?php
$name = htmlspecialchars($_POST['name']);
$email = htmlspecialchars($_POST['email']);
$message = htmlspecialchars($_POST['message']);
$subject = htmlspecialchars($_POST['subject']);
if(trim($name)=="" OR trim($email)=="" OR trim($message)=="" OR trim($subject)=="") {$err="yes";}else {$err="no";}
$to = 'plambata95@abv.bg';//ВЪВЕДЕТЕ ВАШИЯ email!
$sub = $subject."(запитване)";
$mess = $message;
$headers = 'From: '."$name <$email>". "\r\n" .
'Reply-To: '.$email. "\r\n" .
"Content-Type:text/html; charset=UTF-8 \r\n".
'X-Mailer: PHP/' . phpversion();
if($err=="no") {
$mail = mail($to, $sub, $mess, $headers);
if($mail) {print "Вашето запитване е изпратено успешно! Ще получите отговор на $email в най-скоро време!";}
else {print "Грешка при изпращането! Опитайте отново!";}
} else {print "Грешка празни стойности на полетата!";}
?>

Направих го без дизайн защото не ми се занимава, но вие може да си сложите. Дано скрипта да ви е полезен 🙂