CODEWITHSUNDEEP
javascriptphpjqueryajaxvalidation
walter alexander
walter alexander

Reputation: 179

validate ajax submit post method before sending data

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 enter image description here how wever the email is sent

Upvotes: 0

Views: 1160

Answers (1)

Woodrow
Woodrow

Reputation: 2832

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>

Upvotes: 1

Related Questions