Form is Submitting Although Error Handled on Blank Fields

I am trying to submit a form with a little error handling. when the fields are empty there will be a warning and it shouldn’t be saved on DB. if the fields are filled there should be a success alert. My case is still the empty value is being saved.

HTML

<input type="submit" id="add" onclick="emptyHandling();" name="_add" class="btn btn-primary btn-size" value="Add"/>

//FORM SUBMIT

$(document).ready(function(){
    $("#form").on('submit', function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'add.php',
            data: new FormData(this),
            dataType: 'json',
            contentType: false,
            cache: false,
            processData:false,
            async: false,
            autoUpload: false,
            success: function(response){
                $('.statusMsg').html('');
                if(response.status == 1){
                    $('#form')[0].reset(); //FORM TO RESET AFTER SUBMISSION
                    $('.statusMsg').html('<p class="alert alert-success">'+response.message+'</p>'); // REPONSE MESSAGE                    
                }else{
                    $('.statusMsg').html(alert(response.message));
                }
                $('#form').css("opacity","");
                $(".submit").removeAttr("disabled");
            }
        });
    });
});

//ERROR HANDLING - TRIGGERED ON CLICK
function emptyHandling(){
    var inv = $("#inv").val();
    if(inv == ''){
        var message = "Field Left Empty";
        alertMessage(message);
    }else{
        successMessage();
    }
    return false; // THIS IS BEING RETURNED FALSE
}

//WARNING ALERT
function alertMessage(titleMessage){
    swal({
        title: titleMessage,
        text: "Mandatory Fields are Required to be Filled",
        type: "warning",
        confirmButtonClass: "btn btn-danger"
    });
}

The return is made false on error handling which should stop the next processes. I am not really sure of where the mistake is made.

Answer

You can remove onclick from your submit button and move that function call inside your form submit handler . Then , inside this check if the validation function return true/false depending on this execute your ajax call.

Demo Code :

$(document).ready(function() {
  $("#form").on('submit', function(e) {
    e.preventDefault();
    //call function..
    if (emptyHandling()) {
      //your ajax...
      console.log("inside ajax....")
    }
  });
});

//ERROR HANDLING - TRIGGERED ON CLICK
function emptyHandling() {
  var flag = true
  var inv = $("#inv").val();
  if (inv == '') {
    var message = "Field Left Empty";
    alertMessage(message);
    flag = false
  } else {
    successMessage();
  }
  return flag; // return flag//
}

//WARNING ALERT
function alertMessage(titleMessage) {
  //swal...
  console.log(titleMessage)
}

function successMessage() {
  console.log("All good...")
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<form id="form">
  <input type="text" id="inv">
  <input type="submit" id="add" name="_add" class="btn btn-primary btn-size" value="Add" />
</form>