javascript - 防止 Bootstrap 模式在提交按钮单击时关闭

Question

我有一个 Bootstrap 模式。当用户单击“更新”按钮时，它会调用 ajax 来更新数据库。但是，如果由于某种原因更新失败，我想显示错误消息并保持模式打开。

一切似乎都按照我期望的顺序工作，但是 e.preventDefault() 似乎没有阻止模式关闭。

为什么 preventDefault() 没有阻止按钮提交？

我的按钮:

<button type="submit" class="btn btn-success" id="btnUpdate" style="margin-right:10px">Update</button>

Javascript 按钮点击代码。

$("#btnUpdate").on("click", function (e) {
    // reset the message...
    $("#errorMessage").html("");

    // get the value...
    var myParam = $("#someSelection").attr("someData");
    var myParamData = JSON.parse(myParam );

    updateData(myParamData.Name)
    .done(function (result) {
        if (!result.d == "") {
            $("#errorMessage").html(result.d);
            e.preventDefault();
        }
        else {                     
          loadData();
        }
    });
});

Answer 1

只需将按钮的类型更改为 button 即可阻止提交:

<button type="button" class="btn btn-success" id="btnUpdate" style="margin-right:10px">Update</button>

希望这对您有所帮助。

---

更新:

要在使用 ajax 提交时从 HTML5 验证中获益，您可以使用 checkValidity() 方法。

The HTMLSelectElement.checkValidity() method checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable invalid event at the element, and then returns false.

所以你的代码将是:

$("#btnUpdate").on("click", function (e) {
  // reset the message...
  $("#errorMessage").html("");

  if($("form")[0].checkValidity()) {
    // get the value...
    var myParam = $("#someSelection").attr("someData");
    var myParamData = JSON.parse(myParam );

    updateData(myParamData.Name)
      .done(function (result) {
      if (!result.d == "") {
        $("#errorMessage").html(result.d);
        e.preventDefault();
      }
      else {                     
        loadData();
      }
    });
  }else{
    console.log("invalid form");
  }
});