Как проверить заполнение полей формы ajax php?

Question

[Айрат Шакуров]

Вот скрипт ajax

<script>
	function AjaxFormRequest(resultModal_id,formModal_id,url) {
		jQuery.ajax({
			url:     url, //Адрес подгружаемой страницы
			type:     "POST", //Тип запроса
			dataType: "html", //Тип данных
			data: jQuery("#"+formModal_id).serialize(), 
			success: function(response) { //Если все нормально
			document.getElementById(resultModal_id).innerHTML = "Ваша заявка принята!";
		},
		error: function(response) { //Если ошибка
		document.getElementById(resultModal_id).innerHTML = "Ошибка при отправке формы";
		}
	 });
}
</script>

вот php

<?php  
if(isset($_POST["email"])){
$email = '[e-mail]';
/* Отправляем email */
mail($email, "Заявка ...", "\n
Оставили заявку!  \n
".$_POST['nameForm']."
Имя : ".$_POST['imya']."
Email : ".$_POST['email']."
Телефон : ".$_POST['phone']."
Дата и время : ".$_POST['datetime']."
");
}
?>

А вот сама форма

<div id="modal" class="modal">
				<div>
				   <div class="text" align="center">
				   <div id="blok_tel">
			<form action="" name="contact_form" method="post" class="form1" id="formModal_id" onbutton="return validate_form ( );">
				<div id="Nzvonok">Заявка</div>
					<input type="hidden" name="nameForm" value="Вы получили заявку на бронь зала: <?php wp_title(); ?>">
					<input type="text" name="imya" id="imya" class="inputbox"  onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" required>
					<input type="text" name="email" class="inputbox" required="required" value="Ваш Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
					<input type="text" name="phone" class="inputbox" required value="Ваш Телефон" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
					<input type="datetime-local" name="datetime" class="inputbox" required >					
					<input type="button" class="button" name="zayavka" value="Отправить" onclick="AjaxFormRequest('resultModal_div_id', 'formModal_id', '/wp-content/themes/leonastage/formZalyPage.php')">
				<div style="width: 100%; height: 20px; padding: 6px 0 0px; text-align: center; color: #4C4B4B;" id="resultModal_div_id"></div>
			</form>
			</div>
			</div>
				<a href="#close" title="Закрыть">Закрыть</a>
			</div>        
			</div>

Все работает отлично! только вопрос в том, как сделать input поля обязательными, чтобы пустые письма не приходили на почту!

Answer 1

[mletov]

На клиенте 2 способа:
1) плагины к jquery jqueryvalidation.org
2) валидация при помощи html5 ruseller.com/lessons.php?rub=43&id=2062

На сервере код что-то типа

if (isset($_POST["email"]) && isset($_POST['imya']) && ...)
{
     //Отправка почты
}
else
{
    //Вывод списка незаполненных и неправильно заполненных полей
}

Comments

[Айрат Шакуров]

Спасибо, html 5 бессилен если используются скрипты как я понял)
а плагин я не знаю как подключить и настроить, хотелось бы без плагина чтобы попроще было) и если можно подробнее пожалуйста, мучаюсь, не могу понять как..

[mletov]

Вот кнопка

на онклик повесить функцию
function ValidateForm()
{
if (document.getElementById("imya") != null && ...)
{
//Отправляем запрос
AjaxFormRequest('resultModal_div_id', 'formModal_id', '/wp-content/themes/leonastage/formZalyPage.php')
}
else
{
alert("Не все поля заполнены");
}
}

[mletov]

Вот эта кнопка input type="button" class="button" name="zayavka" onclick="ValidateForm()"
К сожалению, в комментарий нельзя нормально код вставлять

[Айрат Шакуров]

вот я сделал, но видимо как то криво, ничего не получается)

[Айрат Шакуров]

[Айрат Шакуров]

<input type="button" class="button" name="zayavka" value="Отправить" onclick="ValidateForm()">
				<div style="width: 100%; height: 20px; padding: 6px 0 0px; text-align: center; color: #4C4B4B;" id="resultModal_div_id"></div>
			</form>
<script>
function ValidateForm()
{
if (document.getElementById("imya") != null && ...)
{
//Отправляем запрос
AjaxFormRequest('resultModal_div_id', 'formModal_id', '/wp-content/themes/leonastage/formZalyPage.php')
}
else
{
alert("Не все поля заполнены"); 
}
}
</script>

[Айрат Шакуров]

я вам буду очень благодарен если вы еще подробнее напишите как мне сделать..:)

[Айрат Шакуров]

вот ссылка сайта:) leonastage.ru/arenda/zaly/plaza

[mletov]

shakur4ikk: Извините, опечатка, забыл value

if (document.getElementById("imya").value != "" && ...)

Под "..." я имел ввиду, что через дальше через && будут все условия проверки

[Айрат Шакуров]

Представляете получилось!!!!!))) ехххууууу!!))) спасибооо вам!!!!)))

[Айрат Шакуров]

mletov: еще маленький вопросик: после && как правильно писать потому что если вот так то ничего не выходит if (document.getElementById("imya").value != "" && document.getElementById("phone").value != "" )

[mletov]

У инпута phone должен быть указан id="phone". Аналогично с остальными полями, которые проверяете.

[Айрат Шакуров]

mletov: спасибо!!!

Answer 2

[LittleFatNinja]

установите всем инпутам required

Comments

[Айрат Шакуров]

установил, но это не помогает..