Как задать проверку обязательных полей в форме?

Question

[asalahiev]

Здравствуйте.
Есть такая форма html:

<form>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body"> 
            <input type="text" class="form-control" id="email" placeholder="Email" required="required" />
            <input type="text" class="form-control" id="phone" placeholder="Телефон" required="required" />
            <textarea class="form-control" id="text" cols="30" rows="10" placeholder="Сообщение"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
        <button type="submit" class="btn btn-primary" id="btn-send">Отправить письмо</button>
      </div>
    </form>

Такой js скрипт:

$(document).ready(function(){   
    $('#btn-send').click(function () {
        var email = $('#email').val();
        var phone = $('#phone').val();
        var text = $('#text').val();
        $.ajax({
            type: "POST", //метод передачи данных
            url: 'page.php', //обработчик php
            data: {email: email, phone:phone, text:text},//передаваемые данные
            success: function(data) { //получение результата
                var old = $('.modal-header').html();//получаем содержимое div
                $('.modal-header').html(old + data); //добавляем сообщение об отправке
                }
            });
    });
});

И php обработчик:

//получаем данные пришедшие post
$email=$_POST[email];
$phone=$_POST[phone];
$text=$_POST[text];
$mess='E-mail: '.$email.'; <br>Номер телефона: '.$phone.' Текст сообщения: '.$text;//сообщение
$headers  = "Content-type: text/html; charset=utf-8 \r\n";//кодировка 
$headers .= "From: [e-mail]";//откуда отправлено письмо
//отправляем email админу
if(mail('[e-mail]', 'Форма обратной связи', $mess, $headers)){
echo '<div class="alert alert-success alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    Сообщение успешно отправлено!
    </div>';
}else{
    echo '<div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong>Ошибка !</strong> Сообщение не отправлено!
    </div>';
}

Письма приходят. Но не работает required в полях, даже если ни одно поле не заполнено, письмо отправляется.
Подскажите, как в этой форме добавить проверку на заполненность нужный полей?

Answer 1

[Spartak (Web-StyleStudio)]

var email = $('#email').val();
var phone = $('#phone').val();
var text = $('#text').val();

Вот эта дичь не нужна!

В полях формы айдишники меняем на атрибут name. Для почты указываем type="email", для телефона type="tel" (на мобильных устройствах будет сразу открыта цифровая клавиатура для ввода телефона).

<form id="sendEmail" action="#" method="POST">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	</div>
	<div class="modal-body">
		<input type="emal" class="form-control" name="email" placeholder="Email" required />
		<input type="tel" class="form-control" name="phone" placeholder="Телефон" required />
		<textarea class="form-control" name="text" cols="30" rows="10" placeholder="Сообщение" required></textarea>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
		<button type="submit" class="btn btn-primary">Отправить письмо</button>
	</div>
</form>

Данные через ajax отправляем на сервер не по клику на кнопку, а по событию submit как это положено для формы.

$(document).ready(function(){
	$("form#sendEmail").submit(function(event) {
		event.preventDefault();
		$.ajax({
			type: "POST", 
			dataType: "html", 
			url: "page.php", 
			data: $(this).serializeArray(),
			success: function(data) {
				$(".modal-header").after(data);
			}
		});
	});
});

P/S: в php обработчик также необходимо добавить проверку и валидацию данных.

Answer 2

[Сергей Масленников]

Уважаемый asalahiev!

Думаю, что не плохо было бы в JS функции проверить содержимое переменных "email", "phone", "text". И вызывать PHP обработчик лишь когда их значения будут не пустыми.

Сами то, что об этом думаете?

Comments

[Slava Rozhnev]

Проверка должна быть как на фронте JavaScript так и на сервере PHP