尽管在空白字段上处理了错误，但表单正在提交

Question

我正在尝试提交一个带有一点错误处理的表单。当字段为空时，将发出警告，不应将其保存在数据库中。如果字段已填写，则应显示成功警报。我的情况仍然是空值被保存。

HTML

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

//表格提交

$(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"
    });
}

在应该停止下一个进程的错误处理时返回为假。我不确定是哪里出错了。

Answer 1

您可以从 submit 按钮中删除 onclick 并将该函数调用移动到您的 form 提交处理程序中。然后，在此检查验证函数是否根据此执行您的 ajax 调用返回 true/false。

演示代码：

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