Question

我对我的Bootstrap 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/

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

Bootstrap模态验证器不工作

1 个答案: