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

Question

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

原文由 John Doe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需将按钮的类型更改为 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");
  }
});

原文由 Zakaria Acharki 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Bootstrap 附带的“Native”模式似乎对 javascript 程序员不友好，请参阅下面的替代插件：

 BootstrapDialog.show({
  title: 'Ajax check',
  message: 'Click buttons below',
  buttons: [{
    label: 'Submit',
    cssClass: 'btn-primary',
    action: function(dialogRef) {
      // Assuming here starts a new ajax request
      $.when().done(function() {
        var ok = false;
        if(!ok) {
          dialogRef.setMessage('<div class="alert alert-warning">Dude, something went wrong!</div>');
        } else {
          alert('Great!');
        }
      });
    }
  }, {
        label: 'Cancel',
        action: function(dialogRef) {
          dialogRef.close();
        }
  }]
});

 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.js"></script>

在此处阅读有关该插件的更多信息 http://nakupanda.github.io/bootstrap3-dialog/

原文由 badboy 发布，翻译遵循 CC BY-SA 3.0 许可协议