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

Posted 2023-05-09

【中文标题】尽管在空白字段上处理了错误，但表单正在提交

【英文标题】：Form is Submitting Although Error Handled on Blank Fields

【发布时间】：2021-09-06 02:18:56

【问题描述】：

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

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

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

【参考方案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>

【讨论】：

嗨 Swati，我认为这种方式效率不高。根据这种情况，我错过了我的成功警报。

查看更新的答案，它工作正常。什么不起作用或我在这里遗漏了什么？

谢谢斯瓦蒂。你答对了。你能解释一下为什么当我在没有启动的情况下将方法设为假时它不起作用。

因为您还没有将函数和事件处理程序连接在一起。您的 fn 必须返回 false 但是，您有另一个用于表单提交的事件处理程序 ..该函数无效，因此为避免这种情况，您可以在事件处理程序中调用您的函数，并根据验证结果执行您的 ajax。跨度>

非常感谢斯瓦蒂。