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();
        }
    });
});

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");
  }
});

Answer 2

从e.preventDefault()方法的回调函数调用

updateData，很有可能在调用回调之前完成事件。

在调用e.preventDefault()方法之前尝试放置updateData。

希望这有帮助

Answer 3

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/

防止bootstrap模式关闭提交按钮单击

3 个答案: