javascript - 尽管有警告信息，表单仍被提交

Question

我有一个表单(一个文本字段和提交按钮)。用户输入将是一个 3 位数字，如果该数字大于 200，则会显示一条警告。如果用户点击 OK，则必须提交表单，但如果他点击 CANCEL，则什么也不会发生，用户将能够再次输入一些值。

事实是我的表单无论如何都在提交(我几乎没有注意到警告警报)。这是代码:

<form name="pontoi" action="update.php" method="post">
    <div class="col-sm-4"><br>
        <div class="input-group">
            <input type="text" class="form-control" autofocus="autofocus" onkeyup="checkInput(this)" maxlength="3" id="points" name="points"> 
            <span class="input-group-btn"> 
                <button type="submit" id="prosthiki" onclick="checkInp(this)" class="btn btn-primary">ΠΡΟΣΘΗΚΗ</button> 
            </span>
        </div>
    </div>
</div>
</form>

function checkInp(e) {
    var x = document.forms["pontoi"]["points"].value;
    var y = 200;
    if (x > y) {
        sweetAlert({
            title: "Number is over 200",
            text: "Are you sure?",
            type: "warning",
            showCancelButton: true,
            closeOnConfirm: false,
            showLoaderOnConfirm: true,
        });
    } else {
        return false;
    }
}

如果您对在任何情况下提交的表单有任何想法，那将对我有很大帮助。

也有这个脚本(我觉得用起来比较好)但是也不好用..

$('.btn btn-primary').on('click',function checkInp(e){
e.preventDefault();
var form = $(this).parents('pontoi');

swal({
    title: "Number is over 200",
    text: "Are you sure?",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "OK",
    closeOnConfirm: false
}, function checkInp(isConfirm){
    if (isConfirm) form.submit();
});
}

});

Answer 1

您还必须监听表单的 onsubmit 事件。

停止按钮的事件传播没有任何效果。

你可以做的是直接 Hook 到提交事件而不是按钮点击

document.querySelector("form").addEventListener("submit", function(ev){

  var points = $("#points").val();

  if(points > 200) {
    // prevent form submission
    // will be submitted if the user clicks ok
    ev.preventDefault();

    sweetAlert({
      title: "Number is over 200",
      text: "Are you sure?",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "OK",
      closeOnConfirm: false
    }, function checkInp(){
      //ev.target is the form submitted
      ev.target.submit();
    });
  }
})