1

検証エラーのあるレイヤーを作成し、フォームと並べてツールチップのように表示したいと思います。次のサンプルのようなもの：

+-------------+
|             |
|             |    Normal Form
|             |
+-------------+

+-------------+-----+
|             |     |
|             |-----+    Form with visible 
|             |          validation errors
+-------------+

はっきりしていますか？エラーコンテナは、検証エラーがある場合にのみ表示され、フォーム自体の右上の領域の周りに配置する必要があります。

実際、私は次のサンプルマークアップを持っています：

<form id="information" method="post" action="#">
   <fieldset>
      <legend>Please enter your contact details</legend>
          <div id="id">
              <label for="name">Name: (*)</label>
              <input type="text" id="name" class="details" name="name" maxlength="50" title="Insert your Name" />
          </div>
          <div id="id">
              <label for="email">Email: (*)</label>
              <input type="text" id="email" class="details" name="email" maxlength="50" title="Insert your Email" />
          </div>
   </fieldset>
   <div id="submission">
       <input type="submit" id="submit" value="Send" name="send"/>
   </div>
</form>

そしてこのjqueryコード：

$(document).ready(function () {
    var form = $('#information');
    var container = $('<div class="error"><p>Errors:</p><ol></ol></div>').appendTo(form).hide();
    var validator = form.validate({
        errorContainer: container,
        errorLabelContainer: $("ol", container),
        wrapper: 'li',
        meta: "validate"
    });
});

これは、フォームの下にエラーリストを追加するのに非常に効果的です。フォームの上に階層化されたエラーdivを表示するにはどうすればよいですか？

助けてくれてありがとう

4

1 に答える 1

1

IDを使用してエラーメッセージコンテナを明示的に設定し、ラベルコンテナも設定することで、必要に応じてエラーメッセージボックスのスタイルを設定するのがはるかに簡単になります。

<div id="formColumn">
    <form id="information" method="post" action="#">
   <fieldset>
      <legend>Please enter your details</legend>
          <div id="id">
              <label for="name">Name: (*)</label>
              <input type="text" id="name" class="details required" name="name" maxlength="50" title="Insert your Name" />
          </div>
          <div id="id">
              <label for="email">Email: (*)</label>
              <input type="text" id="email" class="details required" name="email" maxlength="50" title="Insert your Email" />
          </div>
   </fieldset>
   <div id="submission">
       <input type="submit" id="submit" value="Send" name="send"/>
   </div>
</form>
</div>
<div id="messageBox"><p>Errors:</p><ol></ol></div>​

jQuery：

$(function() {
    var form = $('#information');
    var validator = form.validate({
        errorContainer: "#messageBox",
        errorLabelContainer: "#messageBox ol",
        wrapper: 'li',
        meta: "validate"
    });
});

CSS：

#formColumn{
    display:inline;
    float:left
}
#messageBox{
    display:none;
    float:left
}​

また、バリデータープラグインが他の場所でこの名前を使用するという点で、含まれているエラーメッセージとしてクラス「error」に注意してください。

http://jsfiddle.net/yvxRc/

于 2012-06-12T18:23:42.623 に答える