フォームの検証に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 で動作させるためにリバース エンジニアリングを行う必要があるためです。エラー メッセージが作成される唯一の時間。