在发送数据之前验证 ajax 提交 post 方法

Question

在这种特殊情况下，我使用谷歌标签管理器在引导模式中提交表单。
我无权访问后端，这就是我使用 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>