jQuery防止在if语句中提交表单

Question

对不起，如果有一些错误，但我是一个完全的菜鸟，我也是第一次在 StackOverflow 上发帖。

我正在尝试配置一个提交表单，它控制插入的 PIN 是否正确，如果正确，则继续提交。我做了一些在线研究，发现我们可以使用 jQuery 来运行 event.preventDefault()，我尝试将它插入到我的 AJAX 请求中，但看起来它并没有阻止表单被保存。

代码如下所示：

function verifyOTP() {
    $(".error").html("").hide();
    $(".success").html("").hide();
    var otp = $("#contomovimentato").val();
    var PIN =  $("#PINvalue").val();
    var input = {
        "otp" : otp,
        "PIN" : PIN,
        "action" : "verify_otp"
    };
    if (otp != null) {
        $.ajax({
            url : 'm_ajaxpinr.php',
            type : 'GET',
            dataType : "json",
            data : input,
            success : function(response) {
                $("." + response.type).html(response.message)
                $("." + response.type).show();
                },
            error : function() {
                alert("ss");
            }
        });
    } else {
        $(".error").html('XPIN non valido.')
        $(".error").show();
        error : function(event) { event.preventDefault(); };
    }
 //if I insert "return false;" here the submit is always blocked
}

如果括号是正确的，我检查了 atom，它看起来是正确的。 我应该如何使用 preventDefault() 有什么想法吗？ 我还检查了 m_ajaxpinr.php 的输出是否正确，它是正确的。我也试过这样的，但还是不行……

    if (otp != null) {
        $.ajax({
            url : 'm_ajaxpinr.php',
            type : 'GET',
            dataType : "json",
            data : input,
            success : function(response) {
                $("." + response.type).html(response.message)
                $("." + response.type).show();
        $("form").submit(function(event) {
                    if (response.type == 'success')
                {
                    alert(response.type);
                }
                else if (response.type == 'error') 
                {
                    alert(response.type);
                    event.preventDefault();
                }
                });

Answer 1

正如上面评论所说的ajax调用是异步的，您需要完成表单的取消默认操作或将event.preventDefault();放在顶部功能，然后如果有效otp则在成功功能中提交。

.val() 不会返回null，如果没有输入则返回empty。

$('#myForm').on('submit', verifyOTP);

function verifyOTP(e) {
  e.preventDefault(); // note this
  
  $(".error").html("").hide();
  $(".success").html("").hide();
  var otp = $("#contomovimentato").val();
  var PIN = $("#PINvalue").val();
  var input = {
    "otp": otp,
    "PIN": PIN,
    "action": "verify_otp"
  };

  if (otp) { // mean not null, undefined, empty, false, 0
    $.ajax({
      //url: 'm_ajaxpinr.php',
      url: 'https://httpbin.org/anything/test',
      type: 'GET',
      dataType: "json",
      data: input,
      success: function(response) {
        $("." + response.type).html(response.message)
        $("." + response.type).show();
        if(response.args.otp == 1234){
           console.log('valid otp, continue submission')
           $('#myForm').off('submit'); // remove submit event
           $('#myForm').submit(); // then submit the form
        }
        else{
          console.log('invalid pin,\nvalid pin: 1234');
        }
      },
      error: function() {
        console.log("server error, submission cancelled");
      }
    });
  } else {
    $(".error").html('XPIN non valido.')
    $(".error").show();
    console.log("otp maybe empty, submission cancelled");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  <input id="contomovimentato">
  <button>submit</button>
</form>