引导帮助块仅在表单组有错误时显示 [英] bootstrap help-block to show only if form-group has-error

问题描述

我有一个注释表单，该表单还将引导帮助块显示为:

I have a comment form that is showing also the bootstrap help-block as:

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

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

I want this p to be hidden except when the form is submitted and the field is validated as an error.

提交表单时出错，父级<div class="form-group">...</div>将获得一个附加的has-error类.仅当表单提交中有错误时，我才能显示help-block吗?顺便说一句，我无权访问HTML ...

when the form is submitted with an error, the parent <div class="form-group">...</div> gets an additional has-error class. How could I show the help-block only if there is an error in the form submission? Btw I have no access to the HTML...

推荐答案

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' ]();
  });
});

这篇关于引导帮助块仅在表单组有错误时显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！