在发送数据之前验证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>