如何实现点击Submit按钮先校验再弹出确认模态框？

点击Submit按钮时，表单校验和确认模态框会同时触发，需要调整为先执行表单校验，校验成功后再弹出确认模态框。

用户现有代码如下：

确认模态框代码（modalconfirm插件） #

$("#submit").modalconfirm({
  afterconfirm:function{ // 语法错误：缺少()和正确函数结构
    $(this).parents("form").submit; // 语法错误：submit是方法，需加()调用
  }
}); 

表单校验代码 #

$("#submit").click(function(){
  $("#form").valid();
} // 语法错误：缺少闭合})

HTML结构 #

<div>
  <button id="submit" class="" data-confirmation-content="#some"> Submit</button>
</div>
<div id="some" title"confirmation"> <!-- 语法错误：title属性缺少= -->
  <p> Are you sure? </p>
</div>

解决方案 #

方案1：基于现有modalconfirm插件调整 #

先修正原有代码的语法错误，再将校验逻辑整合到按钮点击事件中，确保校验通过后再触发模态框：

1. 修正modalconfirm配置的语法错误：

$("#submit").modalconfirm({
  afterconfirm: function() {
    $(this).parents("form").submit(); // 调用submit方法提交表单
  }
});

2. 修改按钮点击事件，先执行校验，通过后手动触发模态框：

$("#submit").click(function(e) {
  e.preventDefault(); // 阻止按钮默认行为，避免同时触发校验和模态框
  // 执行表单校验，valid()方法返回布尔值
  if ($("#form").valid()) {
    // 校验通过，触发确认模态框（根据modalconfirm插件API调整，若无open方法可查看插件文档）
    $(this).modalconfirm('open');
  }
});

方案2：使用Bootstrap模态框（解决之前屏幕模糊但模态框不显示的问题） #

之前的问题大概率是HTML结构错误或触发逻辑不当，以下是完整可运行的实现：

修正后的HTML模态框结构

<!-- 提交按钮所在的div -->
<div>
  <button id="submit" class=""> Submit</button>
</div>

<!-- Bootstrap确认模态框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmTitle">Confirmation</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Are you sure?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="confirmBtn">Confirm Submit</button>
      </div>
    </div>
  </div>
</div>

对应JS逻辑

// 初始化表单校验（需确保已引入jQuery Validate插件）
$("#form").validate({
  // 这里添加你的表单校验规则，示例：
  // rules: {
  //   username: { required: true },
  //   email: { required: true, email: true }
  // }
});

// 提交按钮点击事件
$("#submit").click(function(e) {
  e.preventDefault();
  // 执行表单校验
  if ($("#form").valid()) {
    // 校验通过，显示模态框
    $("#confirmModal").modal('show');
  }
});

// 模态框确认按钮点击事件
$("#confirmBtn").click(function() {
  // 提交表单
  $("#form").submit();
  // 隐藏模态框
  $("#confirmModal").modal('hide');
});

关键注意点 #

• 修正所有语法错误：函数定义缺少()、方法调用缺少()、HTML属性缺少=等，这些是导致异常的常见原因。
• 阻止按钮默认行为：通过e.preventDefault()避免同时触发多个事件。
• 确保插件依赖正确：无论是modalconfirm还是Bootstrap模态框，都要确保已正确引入对应的JS和CSS文件。

内容的提问来源于stack exchange，提问作者Amarthya reddy