0

フォームの検証にhappy.jsを使用しています。エラーが発生すると、クラス「unhappyMessage」を持つスパンが、検証に合格しなかったフォーム要素の直前に配置されます。html は最終的に次のようになります。

<form id="myForm">
  <label for="text1">Label 1</label><br />
  <span id="text1_unhappy" class="unhappyMessage">Error message</span>
  <input id="text1" type="text" />
  <br />
  <label for="text2">Label 2</label><br />
  <span id="text2_unhappy" class="unhappyMessage">Error message</span>
  <input id="text2" type="text" />
</form>

<span>エラーが発生するまで、 は表示されません。css を使用して、次のようにコーディングされているかのように、何らかの方法でエラー メッセージを親の先頭にフィルター処理したいと思います。

<form id="myForm">
  <span id="text1_unhappy" class="unhappyMessage">Error message</span><br />
  <span id="text2_unhappy" class="unhappyMessage">Error message</span><br />
  <label for="text1">Label 1</label><br />
  <input id="text1" type="text" />
  <br />
  <label for="text2">Label 2</label><br />
  <input id="text2" type="text" />
</form>

.unhappyMessageそれぞれを独自の行にも表示したいことに注意してください。これを行うCSSのみの方法はありますか?

注: 疑問に思っている方のために、css のみを使用したいのは、これを javascript で動作させるためにリバース エンジニアリングを行う必要があるためです。エラー メッセージが作成される唯一の時間。

4

1 に答える 1

0

Css は解決策を提供しません。イベント委任に簡単にアクセスできない場合は、別のフォーム バリデーターを探してください。または、コードを調べて、回避策を見つけられるかどうかを確認してください。

編集:
happy.js ページを見ると、必要に応じて指定できるコールバック関数が提供されます。

unHappy (関数): フォームの送信が試みられたが、いずれかのフィールドが検証に失敗したときにトリガーされるコールバック。

そのため、すべてのエラー メッセージを先頭に追加する関数を渡します。

于 2012-04-05T01:05:13.853 に答える