Как сделать проверку заполненных полей на ajax при отправки данных на почту?

Question

[Владимир Погодаев]

Здравствуйте, только учу js и мне нужно что бы вы помогли мне. Вообщем что мне нужно. При отправки данных на почту все работает и все данные приходят, выводится текст об успешной отправки. Мне нужно сделать проверку введенных данных, что бы все поля были заполнены, если нет, то текст об ошибки. Весь код ниже

$(document).ready(function(){
            $('.zvonokrecall .button').click(function(){
                // собираем данные с формы
                var user_name = $('#user_name').val();
                var user_email = $('#user_email').val();
                var user_tel = $('#user_tel').val();
                // отправляем данные
                $.ajax({
                    url: "zvonokrecall.php", // куда отправляем
                    type: "post", // метод передачи
                    dataType: "json", // тип передачи данных
                    data: { // что отправляем
                        "user_name": user_name,
                        "user_email": user_email,
                        "user_tel": user_tel,
						"cururl":document.location.href,
						"title":document.title
                    },
                    // после получения ответа сервера

					success: function(response){
						if (response == "0") {
							$(".zvonokrecall .answ").html("Завяка на расчет успешно отправлена - ожидайте ответа!");
							$("#user_name").val("");
							$("#user_email").val("");
							$("#user_tel").val("");
							yaCounter45402159.reachGoal("obratzvonok");
						} else {
							$(".zvonokrecall .answ").html("Заполните поля");
							$("#user_name").val("");
							$("#user_email").val("");
							$("#user_tel").val("");
							
						}
					}
                });
            });

<div class="modal fade zvonokrecall" id="zvonokrecall">
            <div class="modal-dialog">
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span>
                    </button>
                    <div class="modal-body">
                        <div class="modal-title">Консультация строителя</div>
                        <div class="ok">
                            <i class="fas fa-check"></i>
                        </div>
                        <form action="#" method="post">
                            <div class="input-container">
                                <input class="f_1001" type="text" id="user_name" placeholder="Ваше имя">
                                <input class="f_1002" type="tel" id="user_tel" placeholder="Ваш телефон">
                                <input class="f_1003" type="email" id="user_email" placeholder="Ваш e-mail">
                            </div>
                            <div class="button">Заказать консультацию</div>
                        </form>
                    </div>
                    <div class="modal-footer answ">Наш менеджер свяжется с вами в ближайшее время</div>
                </div>
            </div>
        </div>

<?php

$method = $_SERVER['REQUEST_METHOD'];

//Script Foreach
$c = true;
if ( $method === 'POST' ) {

	$project_name = trim($_POST["project_name"]);
	$admin_email  = "[e-mail]";
	$form_subject = trim($_POST["form_subject"]);

	foreach ( $_POST as $key => $value ) {
		if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
			$message .= "
			" . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
			<td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
			<td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
		</tr>
		";
	}
}
} else if ( $method === 'GET' ) {

	$project_name = trim($_GET["project_name"]);
	$admin_email  = "[e-mail]";
	$form_subject = trim($_GET["form_subject"]);

	foreach ( $_GET as $key => $value ) {
		if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
			$message .= "
			" . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
			<td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
			<td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
			</tr>
			";
		}
}
}

$message = "<table style='width: 100%;'>$message</table>";

function adopt($text) {
	return '=?UTF-8?B?'.base64_encode($text).'?=';
}

$headers = "MIME-Version: 1.0" . PHP_EOL .
"Content-Type: text/html; charset=utf-8" . PHP_EOL .
'From: '.adopt($project_name).' <'.$admin_email.'>' . PHP_EOL .
'Reply-To: '.$admin_email.'' . PHP_EOL;

mail($admin_email, adopt($form_subject), $message, $headers );

echo '0';
?>

Answer 1

[Михаил]

особо вчитываться в код не стал, просто скажу методы:
1. выставить в тегах полей required, на стороне браузера форма не будет отправлена пока не будут заполнены все поля с этим параметром. форма должна отправляться через submit а не кликом по кнопке.
2. проверять js'ом .lenght>0 каждое поле, если lenght=0 вывести текст ошибки предварительно создав пустой тег(блок) под ошибку
3. можно проверить на стороне бэка и отдать в ответе ошибку, в ajax succes проверять ответ на ошибку или ее отсутствие и как в методе 2 выводить в пустой блок

Answer 2

[Валера Карманов]

Подключить файл jQuery Validation Plugin и добавь в начало клика на button

if(!$(".form-validate-jquery").valid()) { return; }