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

Question

In this particular case I'm using google tag manager to submit a form within a bootstrap modal.
I don't have access to the backend and this is why I'm using GTM to target a button and use the 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>

After the email is sent, the modal must not close and this is why I'm using ajax.
If I remove the validation I can send email, but even blank it will submit.
I have other validation with javascript, but is not respecting it.

<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>

on console log this is what i get how wever the email is sent

Answer 1

Are you looking for something like this? Looks like you're using a mixture of vanilla JS and jQuery; I'd suggest sticking to one or the other when trying to reference the form and the form inputs, to make it easier.. Also, if you change your input's type to "email" instead of "text", built in browser functionality (for Chrome, etc) will help to ensure a valid email is entered in addition to your validation logic.

 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>