在Bootstrap模式弹出之前验证表单

// 获取表单元素
var form = document.getElementById('myForm');

// 监听表单提交事件
form.addEventListener('submit', function(event) {
  // 阻止表单默认提交行为
  event.preventDefault();

  // 执行表单验证逻辑
  if (validateForm()) {
    // 表单验证通过，显示弹出框
    $('#myModal').modal('show');
  }
});

// 表单验证函数
function validateForm() {
  // 获取表单字段的值
  var input = document.getElementById('myInput').value;

  // 执行验证逻辑
  if (input === '') {
    // 输入字段为空，显示错误提示
    document.getElementById('error').innerHTML = '请输入有效的值';
    return false;
  }

  // 验证通过
  return true;
}

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">弹出框标题</h4>
      </div>
      <div class="modal-body">
        弹出框内容
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>