0

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

フォームの 1 つには、ユーザーが質問に「はい」と答えた場合に表示される非表示のテーブル行がいくつかあります。これらのページでエラー テキスト (「このフィールドは必須です」) の位置を制御できないようで、エラー テキストが CSS に従って赤く色付けされていません。

html は次のとおりです。

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

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


      <tr>
      <td><strong>Question 1</strong></td>
      <td>please answer yes or no to this question</td>
      <td>
          <div class="controls">
              <label class="radio inline">
      <input type="radio" name="AE_W4" id="AE_W4Yes" value="Yes" required>Yes         </label>
              <label class="radio inline">
      <input type="radio" name="AE_W4" id="AE_W4No" value="No" required>No        </label>
              <label for="AE_W4" class="validateError"></label>
    </div>
      </td>
      </tr>


      <tr id="adverseEventDetails">
      <td></td>
      <td>Please enter the description here</td>
      <td>
          <div class="controls">
      <textarea name="AE_Details_W4" id="AE_Details_W4" rows="3" required></textarea>
      <label for="AE_Details_W4" class="validateError"></label>
    </div>
      </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>

スクリプトは次のとおりです。

$().ready(function() {
    // validate the form when it is submitted
    $("#additional").validate();
        errorClass: "validateError";

    if($("#AE_W4Yes:checked").length != 0){
                // yes is checked... show the dependent fields  
                    $("#adverseEventDetails").show(); 
                }else{
                    // hide it and blank the fields, just in case they have something in them
                    $("#adverseEventDetails").hide(); 
                    $("#AE_Details_W4").val("");
                }


    $("#AE_W4Yes").click(function () {
        $("#adverseEventDetails").show();
    });

    $("#AE_W4No").click(function () {
        $("#adverseEventDetails").hide();
        $("#AE_Details_W4").val("");
    });

});

これを示すjsFiddle hereをセットアップしました。

4

1 に答える 1

2

あなたのコード:

// validate the form when it is submitted
$("#additional").validate();
    errorClass: "validateError";

上記のコードに重大な構文エラーがあります。

に問題はありません$("#additional").validate();。プラグインを初期化するだけです。

ただし、errorClass: "validateError";そのように単独で JavaScript 内を動き回ることはできません。errorClass オプションを使用する場合は、ドキュメントに従って使用し、他のルールやオプションと一緒に内部 にリストする必要があります....validate()

// .validate() initializes the plugin
$("#additional").validate({
    // the rules and/or options for Validate() get listed here,
    // and they are separated by commas, not semicolons.
    errorClass: "validateError"
});
于 2013-07-28T17:57:44.220 に答える