Отправка формы Ajax с комментариями в каждый строке кода

В просторах интернета очень много примеров отправки формы через ajax, но большинство примеров используют проверку вводимых данных на стороне клиента, что не очень правильно и безопасно. Любое условие можно подстроить, а затем переработать.

Отправка формы ajax запросом - это значит отдать вводимые данные серверу и вернуть результат пользователю без перезагрузки страницы, при этом все проверки на ввод данных производится на сервере, а не на клиенте при помощи javascript.

В этом уроке я расскажу

1. Как отправлять post input   при помощи ajax 
2. Обработать каждый POST запрос на наличие вредоносного кода
3. Проверить вводимые данные на валидатность (emal или теолефон)
4. Преобразовать данные в массив json
5. Выдать пользователю результат об успехе или об конкретной ошибке

Примечание: Всю красоту и вывод сообщений настраиваете под свой проект, я лишь покажу принцип работы.(каждую строку попытаюсь закомментировать)

Что нам понадобится

1. Библиотека jquery
2. Библиотека phpmailer, для отправки на почту уведомления
3. Компоненты bootstrap (мне было лень писать свои стили, по этому я использовал готовый шаблон)

Разметка формы

Взял наиболее часто встречаемые типы инпутов.

<form id="form" onsubmit="return false">
	<div><input type="text" name="name" value="" placeholder="Ваше имя" class="form-control"/></div>
	<div><input type="text" name="email" value=""  placeholder="Email" class="form-control"/></div>
	<div><input type="text" name="phone" value="" placeholder="Телефон" class="form-control"/></div>
	<div class="radio"><label><input type="radio" name="pol" value="Муж." > - муж.</label></div>
	<div class="radio"><label><input type="radio" name="pol" value="Жен." > - Жен.</label></div>
	<div>Тема:</div>
	<select name="theme" class="form-control">
		<option value="Общие вопросы" selected="selected">Общие вопросы</option>
		<option value="Жалоба">Жалоба</option>
		<option value="Реклама">Реклама</option>
		<option value="Деловое предложение">Деловое предложение</option>
	</select>
	<div><textarea rows="2" name="comment" placeholder="Сообщение" class="form-control" ></textarea></div>
	<div class="checkbox"><label><input type="checkbox" name="privat" value="1"> - согласен на обработку персональных данных</label></div>
	<button class="btn btn-primary" onclick="callback('#form')">Отправить</button>
	<div id="form_result"></div>
</form>

Немного распишу что для чего

onsubmit="return false" - Для того что бы форма не отправляла данные, иначе у нас перезагрузится страница.
onclick="callback('#form')" - функция javascipt, которая будет отправлять ajax форму

Функция отправки формы через ajax

function callback(id) // переменная ID - это идишник формы'
{
	$.ajax({ // создаем конструкцию ajax
		 url: "callback.php", // файл обрабодчик, который будет проверять данные
		 type : "POST", // тип запроса ajax
		 data: $(id).serialize(), // откуда забираем данные (все input в форме с идишником переменной id)
		 success: function(data){ // что будет делаться когда, запрос будет выполнен (не важно успешно или нет)
				data = jQuery.parseJSON(data); // преобразовываем данные в json формат
				if(data.success) // если все проверки прошли валидацию
				{
					$(id+"_result").html(data.success.text); //выводим сообщение об успешной отправке email
					$(id+" .has-error").removeClass(); // удаляем класс, который сигнализировал нас об ошибке в инпутах, если они были
					$(id+" input").val(""); // чистим input ы
					$(id+" textarea").val(""); // чистим textarea
				}
				else // если данные не прошли валидацию
				{
					$(id+" .has-error").removeClass(); // удаляем предыдущие ошибки, для того что бы вывести новые
					$.each(data, function(index, data){ // цикл ошибок, в которые нужно показать пользвателю
						 if(data.error) // если есть ошибки, подсветить инпуты пользователю
						 {
								$(id+' input[name="'+data.error.input+'"], '+id+' textarea[name="'+data.error.input+'"]').parent().addClass("has-error")
						 }
					});
				}
		}
	});
}

Файл обработки ajax запроса

<?php 
require "phpmailer/class.phpmailer.php"; // подключаем библиотеку отправки почты
foreach($_POST as $type=>$value) // цикл преобразует post ы, во избежания вредоносного кода или html кода
{
	if(ini_get('magic_quotes_gpc'))
	$_POST[$k]=stripslashes($_POST[$k]);
	$_POST[$k]=htmlspecialchars(strip_tags($_POST[$k]));
	$_POST[$k]=mysql_escape_string($_POST[$k]);
}

//присваиваем в переменные вводимые данные
$name = $_POST['name']; 
$email = $_POST['email'];
$phone = $_POST['phone'];
$pol = $_POST['pol'];
$theme = $_POST['theme'];
$comment = $_POST['comment'];
$privat = $_POST['privat'];
$ip=$_SERVER['REMOTE_ADDR'];


// пишем правила: если пусто, то в загоняем в массив error текст ошибки и название input 
if($name=="")
{
	$json[]["error"] = array(
	'text' => "Введите ваше имя!",
	'input' => "name" // это необходимо что бы подсветить нужный input пользователю (name="phone")'
	);
}

if($email=="" or !checkEmail($email)) // проверяем email на корректность
{
	$json[]["error"] = array(
	'text' => "Не корректный email",
	'input' => "email"
	);
}

if($phone=="" or !checkPhone($phone)) // проверяем телефон на корретность
{
	$json[]["error"] = array(
	'text' => "Не корректный телефон",
	'input' => "phone"
	);
}

if($pol=="") //проверка radio
{
	$json[]["error"] = array(
	'text' => "Выберите пол!",
	'input' => "pol"
	);
}

if($theme=="")
{
	$json[]["error"] = array(
	'text' => "Выберите тему сообщения!",
	'input' => "theme"
	);
}

if($comment=="")
{
	$json[]["error"] = array(
	'text' => "Введите сообщение",
	'input' => "comment"
	);
}

if(!isset($privat)) //проверка checkbox 
{
	$json[]["error"] = array(
	'text' => "Согласитесь с персональными данными",
	'input' => "privat"
	);
}

if(count($json)==0) // если нет ошибок, выводим сообщение пользователю, отправляем письмо на почту
{
	$json["success"] = array(
	'text' => "Сообщение отправленно",
	);

	$address=$email; // на какую почту пойдет отправка
	$subject=$theme; // тема письма
	// тело письма
	$message_email="<div style='font-family: Helvetica;  background: #f1f1f1;  padding: 15px;  border: 1px solid #ddd;'> 
	<div>
		<h3 style='font-weight:400; margin-top:0px;'>Сообщение с сайта ".$_SERVER["HTTP_HOST"]."</h3>
		<div>
			<strong>Имя:</strong> $name<br/>
			<strong>Email:</strong> $email<br/>
			<strong>Телефон:</strong> $phone<br/>
			<strong>Пол :</strong> $pol<br/><br/>
			<strong>Тема сообщения :</strong> $theme<br/>
			<strong>Сообщение:</strong><br/>$comment
			<hr>
			ip-адрес: $ip
		</div>
	</div>
	</div>";

	$mail = new PHPMailer(); // создаем письмо
	$mail->IsMail(); 
	$mail->AddAddress($address); // куда отправляем(можно указать несколько писем для отправки)
	$mail->AddReplyTo("noreply@".$_SERVER["HTTP_HOST"],$_SERVER["HTTP_HOST"]);// кому отвечать
	$mail->SetFrom("noreply@".$_SERVER["HTTP_HOST"],$_SERVER["HTTP_HOST"]); // от кого пришло и с какой почты
	$mail->Subject = $subject; // тема письма
	$mail->MsgHTML($message_email); //указываем, что тело письма это html
	$mail->Send(); //отправка письма
	
}
	
echo json_encode($json); // преобразование массива в json формат и показываем пользователю результат

//функции 
function checkPhone($str) //Проверка русских символов и чисел 
{
	return preg_match("/^\+?[0-9]{7,12}$/", $str);
}

function checkEmail($str) //Проверка email
{
	return preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $str);
}
?>

Вот что у нас получилось

Согласен, не очень красиво, но я надеюсь что принцип обработки данных вам понятен. 
Если что не ясно пишите комментарии, а на них отвечаю.