bootstrap help-блок для отображения, только если form-group имеет ошибку

#javascript #jquery #twitter-bootstrap

#javascript #jquery #twitter-bootstrap

Вопрос:

У меня есть форма комментария, которая также отображает блок справки начальной загрузки как:

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

Я хочу, чтобы это p было скрыто, за исключением случаев, когда форма отправлена и поле проверяется как ошибка.

когда форма отправляется с ошибкой, родительский <div class="form-group">...</div> элемент получает дополнительный has-error класс. Как я могу показать help-block только, если в отправке формы есть ошибка? Кстати, у меня нет доступа к HTML…

Ответ №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' ]();
  });
});