在發送數據之前驗證ajax提交post方法

Question

在這種情況下，我正在使用Google Tag Manager在Bootstrap模式下提交表單。
我無權訪問后端，這就是為什么我使用GTM定位按鈕並使用onClick的原因。

<script>
$(document).on('submit','#MyForm',function(event){
  var form = $('#MyForm');
  var submit = $('#ssend_btn');
  form.on('submit', function(e) {
    e.preventDefault();
    if($('input', this).val().trim() == ''  ){
      //handle error message
      alert("im empty and email will not send");
    }
    else if (submit != 'null' ){
      event.preventDefault()
      var formData = $(this).serialize();
      console.log(formData);
      $.ajax({
        url: "page.php", // some php
        data: formData,
        datatype: "json",
        type: "POST",
        success: function(data) {

        }
      });
    }
  });
});
</script>

發送電子郵件后，模態必須不能關閉，這就是為什么我使用ajax。
如果刪除驗證，我可以發送電子郵件，但即使是空白也將提交。
我使用javascript進行了其他驗證，但不尊重它。

<script>
function validateForm() {
  var x = document.forms["myForm"]["EMAIL"].value;
  var atpos = x.indexOf("@");
  var dotpos = x.lastIndexOf(".");
  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
    error = "testingo";
    document.getElementById("errorid").innerHTML = error;
    return false;
  }

</script>

在控制台日志上，這就是我得到的 電子郵件的發送方式

Answer 1

您是否正在尋找這樣的東西？ 看起來您正在使用香草JS和jQuery的混合物； 建議您在嘗試引用表單和表單輸入時堅持使用一個或另一個，以使其更容易。此外，如果將輸入的類型更改為“電子郵件”而不是“文本”，則內置瀏覽器功能（適用於Chrome等）將有助於確保除了驗證邏輯之外，還輸入了有效的電子郵件。

 function validateForm() { if ($('#EMAIL').val().trim() === '') { return false; } var x = $('#EMAIL').val(); var atpos = x.indexOf("@"); var dotpos = x.lastIndexOf("."); if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) { error = "testingo"; document.getElementById("errorid").innerHTML = error; return false; } return true; } $(document).ready(function() { var form = $('#MyForm'); var submit = $('#ssend_btn'); form.on('submit', function(e) { e.preventDefault(); if (validateForm() === false) { //handle error message alert("im empty and email will not send"); } else { var formData = $(this).serialize(); console.log(formData); $.ajax({ url: "page.php", // some php data: formData, datatype: "json", type: "POST", success: function(data) { } }); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="MyForm" name="MyForm"> <input type="text" name="EMAIL" id="EMAIL" placeholder="EMAIL" /> <div id="errorid"></div> <input type="submit" id="ssend_btn" value="Submit" /> </form>