safariで<form>タグの送信ボタン<input type="submit">が押せない？

Question

<from>タグで、お問い合わせホームを作成していたのですが、
safariで<form>タグの送信ボタン<input type="submit">が押せないという現象におちいりました。

動作の流れは、以下の通りです。
入力フォームは、すべて必須項目。
すべて入力した後、<input id="agree">タグを選択すると、送信ボタンをクリック出来る。
送信ボタンをクリックした時、入力漏れがある場合はエラーメッセージを通知。
漏れがなければ、フォーム内容が送信され、送信完了画面へ移行される。

##フォームの内容
すべて必須項目になるように制作しています。

<form action="booking.php" method="post" name="booking">
<section class="guestinfo">
  <h3>Guest Information</h3>
  <div class="name clearfix">
    <p>First Name <br>
      <input type="text" name="lName" value="" required placeholder="ex. Hanako"/></p>
    <p>Last Name <br>
      <input type="text" name="fName" value="" required placeholder="ex. Yamada" /></p>
  </div>
  <div class="email clearfix">
    <p>Email<br>
      <input type="email" name="Email" value="" id="email" required placeholder="ex. [e-mail]"/></p>
    <p>Confirm Email <br>
      <input type="email" name="cEmail" value="" id="emailC" required oninput="check01(this)" class="check01" /></p>
  </div>
  <div class="tel">
    <p>Phone Number<br>
      <input type="tel" name="phone" value="" required placeholder="ex. 000-0000-0000"/></p>
  </div>
  <div class="address">
    <p>Address<br><textarea name="address" cols="30" rows="3" required></textarea></p>
  </div>
  <div class="birthday">
    <p>Birthday<br><input class="checkS" name="Birthday" id="Birthday" type="text" min="2018-12-14" placeholder="YYYY/mm/dd" required></p>
  </div>
  <div class="bloodtype">
    <p>Blood Type<br>
      <select name="roomType" required>
        <option value selected>---</option>
        <option value="Dormitory Room">A</option>
        <option value="Triple Room">B</option>
        <option value="Quadruple Room">AB</option>
        <option value="Quadruple Room">O</option>
      </select>
    </p>
  </div>
</section>
<div class="agreement">
  <label><input id="agree" type="checkbox" name="tos" required />I agree to privacy.</label>
</div>
<p class="transmission"><input id="transmission" name="transmission" type="submit" value="Reservation &#62;" /></p>
</form>

　
入力漏れがある場合の通知設定、
<input id="agree">タグを選択すると、送信ボタンをクリック出来る設定
をJSで設定しています。

// 入力漏れの通知
$(window).on("load", function() {
  $("select, textarea").each(function(index, element) {
    element.addEventListener("invalid", function(e) {
        if(element.validity.valueMissing){
        e.target.setCustomValidity("Required item");
      } else {
        e.target.setCustomValidity("");
        e.preventDefault();
      }
    });
  });
  $("input").each(function(index, element) {
    element.addEventListener("invalid", function(e) {
      if(element.validity.valueMissing){
        e.target.setCustomValidity("Required item");
      } else if ($(this).hasClass('check01')){
        check01(input);
      }else{
        e.target.setCustomValidity("");
        e.preventDefault();
      }
    });
  });  
});
function check01(input) {
  var mail = email.value;
  var mailC = input.value;
  if (mail != mailC){
    input.setCustomValidity('An email does not accord.');
  }else{
    input.setCustomValidity('');
  }
}
// [#agree]を選択すると、送信ボタンをクリック出来る。
$(window).on("load", function() {
  transmission();
  $("#agree").click(function(){
    transmission();
  });
  function transmission(){
    if ($("#agree").prop("checked") == false) {
      $("#transmission").prop("disabled", true);
    } else {
      $("#transmission").prop("disabled", false);
    }
  }
});

　
日付選択をする部分のために、
「datepicker.min.js」を読み込んでいます。
このJSの設定は、HTMLの下部に記述しています。

<script>
$(window).on("load", function() {
  if((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
  } else {
    calendar();
  }
});
function calendar() {
jQuery('#Birthday').datetimepicker({
  timepicker:false,
  format:'Y/m/d',
  formatDate:'Y/m/d.',
  minDate:'2018/12/14',
});
}
</script>

　
上記の記述で入力の動作確認を行ったところ、
ChromeやFirefoxなどで問題なく動きました。

safariでは、
送信ボタンをクリックした時、入力漏れがある場合はエラーメッセージを通知するところまでは、正常に動くのですが、
入力漏れがない状態して送信ボタン押しても、フォーム内容が送信されず、送信完了画面へ移行されません。

やってみたけどダメだったこと

ネットで色々調べていたら、
safariでは、<input type="submit">が動かないという記述を見たので、
下記の方法を試してみました。

結果は、
送信ボタンをクリックした時、入力漏れがある場合に出るエラーメッセージの通知が出てこずに、フォーム内容が送信され、送信完了画面へ移行してしまう。

function transmission() {
  document.booking.transmission.addEventListener('click', function() {
      document.booking.submit();
  });
}

どうしたら、safariでも想定した動きの流れになるでしょうか？

Comments

[colling]

こちらの環境ではiPhone のSafariでも送信ボタンでフォーム送信され、症状が出ないです。ボタンアクティブにはなりますか？

[x_x]

Safariのバージョンはいくつでしょうか？ また、<input type="submit">が動かないという情報はどこのものですか？ それと、本題と関係ないかもしれませんがdatepicker.min.jsがどれかわからなかったのでアドレスを記載してください。

[退会済みユーザー]

他の方もおっしゃっている通りSafariといってもスマホ版やタブレット版、パソコン版などがあり、またバージョンによって挙動が変わる場合があるためきちんと明記されることが近道かと。