2

Twitter Bootstrap フレームワークを使用してフォームを作成し、jQuery Validation Plugin を統合しました。各質問が空でないことを確認するために検証するラジオボタン付きの一連のはい/いいえの質問を含む1つのフォームがあります-これはうまく機能しています。

Bootstrap class="control-group error" を活用して、エラー テキストを赤で表示し、ユーザーに目立つようにしたいと思います。現在、「このフィールドは必須です」というテキストは黒で、見つけるのが困難です。

エラーテキストをここに表示する方法の例があります：

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

このセクションの最後にある「検証状態」の下にあります。入力フィールドの後に赤いメッセージを表示する具体的な例を次に示します ([送信] ボタンをクリックした後にのみエラーを表示したい):

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

1つの質問を示す私のフォームは次のとおりです。

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

フォームを送信して質問に回答していない場合に警告が赤で表示されるように、例をフォームと組み合わせる方法がわかりません。

ここでjsFiddle をセットアップしました。これは、これが役立つ場合にアクションであることを示します。

4

2 に答える 2

1

オプションを使用してerrorClass、jQuery Validate プラグインを必要なclassエラーに設定します。.control-groupこれにより、検証エラーが発生したときにと.errorクラスの両方が適用されます...

$(document).ready(function () {
     // initialize the plugin
     $("#inputForm").validate({ 
         errorClass: "control-group error"
     });
});

http://jsfiddle.net/F28PF/1/

プラグイン オプションのドキュメントを参照してください: http://jqueryvalidation.org/validate

編集：

指摘したように、デフォルトの動作はerrorClassメッセージとinput要素に を置きます。

エラー/有効なクラスを別のものに切り替える必要がある場合は、highlightおよびunhighlightコールバック関数を利用します。

$(document).ready(function () {
    // initialize the plugin
    $("#inputForm").validate({
        errorClass: "control-group error",
        highlight: function (element, errorClass, validClass) {
            $(element).closest(".control-group").addClass(errorClass).removeClass(validClass);
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).closest(".control-group").addClass(validClass).removeClass(errorClass);
        }
    });
});
于 2013-07-25T15:02:16.227 に答える
0

ブートストラップが使用されることを意図した方法でコントロール グループを使用するには、周囲のコントロール グループの値を設定する必要があります。受け入れられた答えはまったく正しくありません.control-groupを入力自体に配置したくはありませんが、コンテナに配置します。このコードは機能するはずです。

$("#page-form").validate({
        highlight: function (element, errorClass, validClass) {
            $(element).closest(".control-group").addClass(errorClass).removeClass(validClass);
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).closest(".control-group").addClass(validClass).removeClass(errorClass);
        }
    });
于 2014-08-22T22:06:01.170 に答える