防止引导模态在提交按钮单击时关闭

John doe 发表于 Dev

约翰·杜

我有一个引导模态。当用户单击“更新”按钮时，它将进行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();
        }
    });
});

扎卡里亚·阿查尔基（Zakaria Acharki）

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

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

希望这可以帮助。

更新：

为了在使用ajax提交时受益于HTML5验证，可以使用checkValidity（）方法。

HTMLSelectElement.checkValidity（）方法检查元素是否具有任何约束以及是否满足约束。如果该元素未能通过其约束，则浏览器将在该元素上引发可取消的无效事件，然后返回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");
  }
});