Question

我一直在寻找解决此问题的方法，但似乎没有任何工作......我在一个模式中有一个来自bootstrap的表单，我需要在提交之前对表单执行验证。在提交时，它只是转到另一页，简单。

但是当验证失败时，我想要的是模式不关闭，表单将不会提交（已经到位），然后我在表单上有一些jquery-ui效果领域。我尝试过这样的事情：

$('#modalDiv').modal('show');

当验证返回false时，或者将其添加到该模态的hide.bs.modal事件中，但它只是退出，消失，并留下背景......？

bootstrap和jquery-ui之间是否存在某种冲突？我很惊讶没有一种简单的方法可以在表单提交上禁用模式关闭，但我想我并不是第一个参与辩论的人。有什么建议??

Answer 1

我一直在寻找解决方案。我提出了以下“解决方案”，我宁愿称之为解决方法。我删除了html表单元素和用过的ajax进行验证。

HTML代码：

    <div class="modal fade"  id="addCategoryModal" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Add Category</h4>
          </div>
          <div class="modal-body">

                <div class="form-group">
                    <label for="categoryName">Category Name*</label>
                    <input type="text" class="form-control" id="categoryName" placeholder="Category Name">
                </div>
                <div>
                    <button class="submit" id="addCategoryBtn">Submit</button>
                </div>

          </div>
          <div class="modal-footer">
             <div id="message-warning" style="display: none;"></div>
             <div id="message-success" style="display: none;"></div>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

AJAX代码：

$( document ).ready(function() {

/* Add Category*/ 
$('#addCategoryBtn').click(function() {
      var categoryName = $('#categoryName').val();

      if (categoryName == "") {
                $('#message-warning').html("Please add Category");
                $('#message-warning').fadeIn();
      }
      else{

      var data = 'categoryName=' + categoryName;
      $.ajax({
          type: "POST",
          url: "insert.php",
          data: data,
          success: function(msg) {

            // Category was added
            if (msg == 'OK') {
               $('#message-warning').hide();
               $('#categoryName').val("");
               $('#message-success').html("Category Added");
               $('#message-success').fadeIn();   
            }
            // There was an error
            else {
               $('#message-warning').html(msg);
               $('#message-warning').fadeIn();
            }

          }

      });
    }
});//End Add Category


});//End Document Ready Function

Bootstrap Modal在提交时关闭

1 个答案: