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

Form is Submitting Although Error Handled on Blank Fields

提问人：Roshan Zaid 提问时间：6/22/2021 最后编辑：Roshan Zaid 更新时间：6/22/2021 访问量：346

问：

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

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

在错误处理时，返回值为 false，这应该会停止下一个进程。我真的不确定错误在哪里。

JavaScript jQuery 表单 错误处理

评论

答：

1赞 Swati 6/22/2021 #1

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

演示代码：

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

评论

0赞 Roshan Zaid 6/22/2021
嗨，斯瓦蒂，我不认为这种方式是有效的。在这种情况下，我错过了成功警报。
0赞 Swati 6/22/2021
请参阅更新的答案，其工作正常。什么不起作用，或者我在这里遗漏了什么？
0赞 Roshan Zaid 6/22/2021
谢谢斯瓦蒂。你做对了。您能否解释一下为什么当我在没有启动的情况下使方法为假时它不起作用。
0赞 Swati 6/22/2021
因为您尚未将函数和事件处理程序连接在一起。您的 fn 必须返回 false，但是，您有另一个用于表单提交的事件处理程序。如果该函数不起作用，因此为了避免这种情况，您可以在事件处理程序中调用函数，并根据验证结果执行 AJAX。

上一个：如何忽略jQuery中的“无法读取属性”错误

下一个：从 .ajax 返回时突出显示 msg 并将其附加到元素