D
D
Daniel_Defo2017-08-16 20:29:45
Validation
Daniel_Defo, 2017-08-16 20:29:45

Safari Ajax form validation not working in any way?

Hello people, I have such a problem, I can’t do form validation in the Safari browser? I tried a bunch of scripts, just the sea (about 20 pieces, plugins and everything that is possible), when you click on the button in Safari when it is empty, you still send it to the mail, but you must substitute required) Save me, I ask you kind people, I sit all day)

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

                  <!-- Hidden Required Fields -->
                  <input type="hidden" name="Project" value="Сайт Крейслер">
                  <input type="hidden" name="admin_email" value="[email protected]">
                  <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 the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexey, 2017-08-16
@Daniel_Defo

The second time I returned to the question, since it still remained unanswered.
The first time I did not answer, because it was not formulated correctly and it is difficult to understand what kind of problem you have.
The title of the question contains the text that form validation does not work in safari. But you don’t have validation at all in the sense that everyone understands it. Validation is when the form is not sent to the server until the conditions are met. There is also validation on the server side. But you have no validation at all.
In your example, when submitting the form, you send an ajax request to the server anyway, and it doesn't matter whether it's Safari or any other browser.
I guess that the problem is most likely that after submitting the form via ajax, you write

...
return false;
....

And most likely browsers do not reload the page, but safari reloads the page. If so, then it is enough to write instead of your button:
And hang an event on a click on it:
$("#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);
    });
  });

As for the php script, there are simply no words ....

U
Uwe_Boll, 2017-08-16
@Uwe_Boll

And who will cancel the default behavior?

$(".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;
  });

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question