Stworzyłem formularz przy użyciu struktury Twitter Bootstrap i zintegrowałem wtyczkę jQuery Validation Plugin. Mam jeden formularz z serią pytań tak / nie z przyciskami radiowymi, które sprawdzam, aby upewnić się, że każde pytanie nie jest puste - to działa dobrze.

Chciałbym skorzystać z klasy Bootstrap = „błąd grupy kontrolnej”, aby tekst błędu pojawił się na czerwono, tak aby wyróżniał się dla użytkownika - obecnie tekst „To pole jest wymagane” jest czarny i trudno go zlokalizować.

Oto przykład, w jaki sposób chciałbym, aby tekst błędu pojawił się tutaj:

http://twitter.github.io/bootstrap/base-css.html#forms

na końcu tej sekcji w sekcji „Stany walidacji”. Oto konkretny przykład pokazujący czerwoną wiadomość po polu wejściowym (chcę, aby błąd pojawił się dopiero po kliknięciu przycisku Wyślij):

<div class="control-group error">
  <label class="control-label" for="inputError">Input with error</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">Please correct the error</span>
  </div>
</div>

Oto mój formularz pokazujący jedno pytanie:

<form class="form-horizontal" method="post" id="inputForm">
      <input type="hidden" name="recid" value="1">

      <table class="table table-condensed table-hover table-bordered">

      <h2>Input Form</h2>

          <tr>
          <td>Question 1.</td>
          <td>
              <div class="controls">
                  <label class="radio inline">
          <input type="radio" name="q1" value="Yes" required>Yes          </label>
                  <label class="radio inline">
          <input type="radio" name="q1" value="No" required>No        </label>
                  <label for="q1" class="error"></label>
        </div>
          </td>
          <td>Please answer Yes or No</td>
          </tr>

      </table>
       </div>

        <div class="control-group">
            <div class="controls">
              <button type="submit" class="btn btn-primary">Continue</button>
              <button type="reset" class="btn">Reset</button>
            </div>
        </div>

      </form>

Nie mogę się dowiedzieć, jak połączyć przykład z moim formularzem, więc jeśli prześlą formularz i nie odpowiedzą na pytanie, alert pojawi się na czerwono.

Skonfigurowałem jsFiddletutaj to pokazuje, że jest to działanie, jeśli to pomaga.