bootstrap help-block仅在form-group has-error

Question

我有一个评论表单，它还显示了bootstrap帮助块：

<p class="help-block">required</p>

我希望隐藏此p，除非提交表单并将字段验证为错误。

当提交表单时出现错误，父<div class="form-group">...</div>会获得额外的has-error课程。如果表单提交中有错误，我怎么能显示help-block？顺便说一下，我无法访问HTML ...

Answer 1

CSS方式

.help-block { display: none; }
.form-group.has-error .help-block { display: block; }

jQuery方式

$('.help-block').hide();

$('#yourForm').submit(function(){
  $.each($(this).find('.form-group'), function(){
    // Long but clear version
    if ( $(this).hasClass('has-error') ) {
      $(this).find('.help-block').show();
    } else {
      $(this).find('.help-block').hide();
    }

    // Shortest version
    // $(this).find('.help-block')[ $(this).hasClass('has-error') ? 'show' : 'hide' ]();
  });
});