Bootstrap 模态验证器不工作

Question

我在 Bootstrap Modal 上放置的表单有问题。我真的是网络编程的新手。

我的代码的目的是当用户没有在文本字段中插入文本时显示一些错误通知。

这是我的 Modal 中的表单，

 <div class="modal fade" id="add_room" role="form">
  <div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">

  <div class="modal-body">

    <?php 
       $attributes = array("id" => "addform", "name" => "addform");
       echo form_open_multipart("", $attributes);
    ?>
    <div class="form-group has-error">
        <input class="form-control" id="txt" name="txt" type="text"/>
    </div>
    <div class="form-group last">
        <button type="submit" class="btn btn-success"/>Submit</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>


</div>
</div>
</div>
</div>

这是脚本

<script type="text/javascript">
  $('#addform').on('submit', function(e) {
    var txt = $('#txt');

    // Check if there is an entered value
    if(!txt.val()) {
      // Add errors highlight
      txt.closest('.form-group').removeClass('has-success').addClass('has-error');

      // Stop submission of the form
      e.preventDefault();
    } else {
      // Remove the errors highlight
      txt.closest('.form-group').removeClass('has-error').addClass('has-success');
    }
  });

总之，代码参考这个问题link。但不知何故，也许我错过了什么。

问题是，每次我按下提交按钮时，模式都会关闭。我所需要的是，它应该根据 JavaScript 显示一些通知/红线。

有人可以帮帮我吗？

Answer 1

首先，您要确保包含所有需要的 js 文件。比如：

<script src="[path]/jquery.min.js"></script>
<script src="[path]/bootstrap.min.js"></script>
<script src="[path]/formValidation.min.js"></script>

现在，您只需将验证绑定到您的表单，例如：

$('your-form-identifier').formValidation({
    // some validation options, according to the documentation of the plugin you use
});

根据您将使用的验证工具，您可能需要向输入添加属性，指定您需要的验证类型。例如：<input type="text" ... required /> 表示用户需要输入一些数据； <input type="email" ... /> 表示用户需要输入有效的电子邮件等。

查看这篇文章： http://formvalidation.io/examples/modal/

请提供小提琴或更多代码，我可以尝试为您提供有关您需要做什么的更多详细信息。