Bootstrap 3验证状态，默认显示“错误”

Question

我有一个简单的bootstrap 3样式表单。我有span help-block我明白如果父div与form-group类的has-error也定义了Bootstrap，我会理解，但是，错误帮助文字默认显示。

我发现了这个SO thread，但是，我认为<form id="the-form" action="/abc" method="post"> <div class="form-group"> <label for="title" class="control-label">Title</label> <input id="title" name="title" class="form-control" placeholder="Title" type="text" value=""> <span class="help-block">Title is not valid.</span> </div> <button id="create-button" type="button" class="btn btn-primary">Submit</button> </form> 会处理这种隐藏/取消隐藏的逻辑。这是一个不正确的假设吗？我应该照看秀吗？

error

但是，默认情况下会显示$(document).ready(function(){ $.fn.chunk = function(size) { var arr = []; for (var i = 0; i < this.length; i += size) { arr.push(this.slice(i, i + size)); } return this.pushStack(arr, "chunk", size); } var listItems = $("ul.nav li div"); listItems.each(function() { var contentIds = $(this).attr("id"); if(contentIds != 'homeLink' && contentIds != 'jobBoardLink' && contentIds != 'contentLink10000001' && contentIds != 'contentLink20000002' && contentIds != 'contentLink30000003' && contentIds != 'contentLink40000004'){ $(this).parent().appendTo('#contentLink10000001'); if(contentIds.indexOf('contentLink2') !== -1){ $(this).parent().appendTo('#contentLink20000002'); } if(contentIds.indexOf('contentLink3') !== -1){ $(this).parent().appendTo('#contentLink30000003'); } if(contentIds.indexOf('contentLink4') !== -1){ $(this).parent().appendTo('#contentLink40000004'); } } }); $('#contentLink10000001 > a,#contentLink20000002 > a,#contentLink30000003 > a,#contentLink40000004 > a').removeAttr('href'); var liCount = $('#contentLink10000001 li,#contentLink20000002 li,#contentLink30000003 li,#contentLink40000004 li').length; $("#contentLink10000001 li").chunk(liCount).wrap('<ul class="subContent"></ul>'); $("#contentLink20000002 li").chunk(liCount).wrap('<ul class="subContent"></ul>'); $("#contentLink30000003 li").chunk(liCount).wrap('<ul class="subContent"></ul>'); $("#contentLink40000004 li").chunk(liCount).wrap('<ul class="subContent"></ul>'); });文字：

Answer 1

将类has-error添加到form-group div时.Bootstrap仅对from-group内的元素应用CSS错误。

如果只想在错误上显示错误信息。你必须通过JavaScript显示或隐藏它。有几种方法可以做到这一点。一个是：隐藏错误的msg默认情况下，你可以用bootstrap类隐藏

<span class="help-block hidden">Title is not valid.</span>

因此，当您将类has-error添加到表单时，您应该从帮助块中删除隐藏的类。然后您需要在表单正确时再次添加该类隐藏..所有这些与JS 。这将有效。