Bootstrap3 JavaScript隐藏/显示错误消息

Question

我在Bootstrap 3中遇到问题。当在使用javascript的表单中检测到错误时，我想显示DIV。 控件似乎没问题，但DIV没有显示。 提前致谢

html代码：

<div class="alert1 alert-danger hidden">You have to ... !</div>

JavaScript代码：

<script type="text/javascript">
    $(function(){
     $("#form1").on("submit", function(){
      if($("#dossier_pro_numero_rue").val().length < 1){
       $("div.control-group").addClass("alert-danger");
       $("div.alert1").show("slow").delay(3000).hide("slow");
      return false;}
     });
    });
</script>

编辑：

但是最后，我的问题是Bootstrap（3.1）与jquery之间发生冲突。

如果我在首页上显示以下内容：

<script src="jquery-2.1.0.min.js"></script>

没关系

但是如果我也把这一行：

<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">

这是错误的，我的错误消息没有显示

与Bootstrap版本2.x相同的代码也可以。

您可以在...上进行测试。http://jsbin.com/siwik/1/edit ? html,css,output

可以，但是如果添加库Bootstrap最新版本，它将无法运行

你明白为什么吗？

编辑：

我已经找到了非常简单和合乎逻辑的解决方案：

你不要把'隐藏'：

    <div class="alert1 alert-danger">You have to ... !</div>

Answer 1

只需使用.alert1而不是div.alert1

   $(".alert1").show("slow").delay(3000).hide("slow");

或id属性选择器，用于调用DOM元素。

Answer 2

 $("#form1").on("submit", function(e){
      if($("#dossier_pro_numero_rue").val().length < 1){
          e.preventDefault();
          $("div.control-group").addClass("alert-danger");
          $("div.alert1").show("slow").delay(3000).hide("slow");
      }
 });

JS小提琴： http ： //jsfiddle.net/Vb8j8/