防止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的submition时从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");
  }
});