javascript - Bootstrap 帮助 block 仅在表单组有错误时显示

Question

我有一个评论表单，其中还显示了 Bootstrap 帮助 block :

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

我想要这个p除非提交表单并且该字段被验证为错误，否则将被隐藏。

当表单提交错误时，父级<div class="form-group">...</div>获得额外的 has-error类(class)。我怎样才能显示 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' ]();
  });
});