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

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

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

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...

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

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

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

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...

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Oct 11, 2016 at 12:11 Ali Hesari 1,94955 gold badges2727 silver badges5454 bronze badges asked Oct 11, 2016 at 11:22 TorostarTorostar 49722 gold badges88 silver badges2020 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

CSS way

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

jQuery way

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