Safari валидация формы Ajax не работает ни в какую?

Question

[Daniel_Defo]

Привет, народ есть такая проблема, не могу сделать валидацию формы в браузере Safari? перепробовал кучу скриптов, просто море(около 20 штук, плагины и все что можно), при нажатии на кнопку в Safari когда она пустая все равно отправляе на почту, а должно required подставлять) Спасите меня прошу вас добрые люди, я весь день сижу)

<form class="header-form" id="formID">

									<!-- Hidden Required Fields -->
									<input type="hidden" name="Project" value="Сайт Крейслер">
									<input type="hidden" name="admin_email" value="[e-mail]">
									<input type="hidden" name="form_subject" value="Заявка с верхней формы">
									<!-- End Hidden Required Fields -->

									<div class="succsess-form">
										<div class="suc-bg">
											<!-- <span class="criste">	&times; </span> -->
											<span class="h2">
												Спасибо!
											</span>
											<p class="suc-text">Ваша заявка успешно принята, наш менеджер свяжется с <br> Вами в ближайшее время!</p>
										</div>
									</div>
									
									<span class="h3">Проконсультируйтесь с дизайнером для выбора нужного цвета и материала</span>

									<input type="email" minlength="10" name="email" placeholder="Введите Ваш email" required="true">
									<input id="phone" type="tel" name="phone" placeholder="Введите Ваш телефон" max-length="11" required="true">
									
									<button id="status" class="orange-btn">Получить консультацию</button>
									<!-- <input type="submit" id="status" class="orange-btn" value="Получить консультацию"> -->

									<input name="checkbox" id="my_check" type="checkbox" checked="checked" required="true">
									<label for="my_check">Я принимаю <a class="cheked" href="#">условия передачи информации</a></label>
									

									<p class="head-para">Номер телефона нужен для закрепления за Вами персонального подарка или скидки</p>

								</form>

$(".header-form").submit(function() { //Change
		var th = $(this);
		$.ajax({
			type: "POST",
			url: "mail.php", //Change
			data: th.serialize()
		}).done(function() {
			$(th).find(".succsess-form").addClass("active").css("display", "flex").hide().fadeIn();
			setTimeout(function() {
				$(th).find(".succsess-form").removeClass("active").fadeOut();
				th.trigger("reset");
			}, 3000);
		});
		return false;
	});

<?php

$method = $_SERVER['REQUEST_METHOD'];

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

	$project_name = trim($_POST["project_name"]);
	$admin_email  = trim($_POST["admin_email"]);
	$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  = trim($_GET["admin_email"]);
	$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 );

Answer 1

[Алексей]

Второй раз вернулся к вопросу, так как он до сих пор остался без ответа.
Первый раз не стал отвечать, так как он сформулирован не верно и сложно понять, что же у вас за проблема.
Заголовок вопроса содержит текст, что форма валидации не работает в сафари. Но у вас вообще нет валидации в том смысле в котором ее все понимают. Валидация, это когда форма не отправляется на сервер пока не будут выполнены условия. Бывает еще валидация на стороне сервера. Но у вас вообще никакой валидации нет.
В вашем примере при отправке формы вы в любом случае отсылаете ajax запрос на сервер, и не важно сафари это или какой-либо другой браузер.
Я догадываюсь, что проблема скорее всего заключается в том, что вы после отправки формы через ajax пишите

...
return false;
....

И скорее всего в браузеры не перегружают страницу, а сафари перегружает страницу. Если это так, то достаточно вместо вашей кнопки написать:

<input type="button" id="status" class="orange-btn" value="Получить консультацию">

И вешать событие на клик по ней:

$("#status").on('click', function() { //Change
    $.ajax({
      type: "POST",
      url: "mail.php", //Change
      data: th.serialize()
    }).done(function() {
      $(th).find(".succsess-form").addClass("active").css("display", "flex").hide().fadeIn();
      setTimeout(function() {
        $(th).find(".succsess-form").removeClass("active").fadeOut();
        th.trigger("reset");
      }, 3000);
    });
  });

Что касается скрипта php, то просто слов нет....

Comments

[Daniel_Defo]

Поправил все как у вас, но теперь все данные закидывает в адресную строку в браузере, проблема видимо заключается в php скрипте, он считывает данные с формы, а если ставить событие клик, то все рушиться
В php не силен нашел этот вариант просто в связке с ajax скриптом

[Алексей]

Daniel_Defo:
не может быть, что "закидывает в адресную строку" :)
должен быть код именно

input type="button" id="status"

как я написал, а не

input type="submit" id="status"

как было у вас в комментариях.
Такой элемент вообще не отправляет форму. Все делается в ajax запросе.
Кстати, я там пропустил строку перед ajax.
var th = $( '#formID' );

Что касается скрипта php то он ужасен.

Answer 2

[Uwe_Boll]

А отменять дефолтное поведение кто будет?

$(".header-form").submit(function(e) { //Change
    e.preventDefault();
    var th = $(this);
    $.ajax({
      type: "POST",
      url: "mail.php", //Change
      data: {
         form_data : th.serialize()
      },
    }).done(function() {
      $(th).find(".succsess-form").addClass("active").css("display", "flex").hide().fadeIn();
      setTimeout(function() {
        $(th).find(".succsess-form").removeClass("active").fadeOut();
        th.trigger("reset");
      }, 3000);
    });
    return false;
  });