html5のフォームバリデーションのCSSが知りたい

Question

現在symfony2でウェブサービスを構築しているのですが、フォームバリデーションはサーバーサイドで設定しようと思っております。
その際エラー表示の挙動を下記のようなhtml5のフォームバリデーションと全く同じようにしたいのですが、こちらは可能でしょうか。

可能であれば、どういったcss及びjavascriptのコードで実装すればよいかまで教えていただけると助かります。
よろしくお願いいたします。

Comments

[tanat]

こちらの質問が他のユーザから「質問の範囲が広すぎる」という評価を受けています
わからない点を明確にし、調査したこと・試したことと共に記入していただくと、回答が得られやすくなります。

[flat]

こちらの質問が他のユーザから「質問の範囲が広すぎる」という評価を受けています
わからない点を明確にし、調査したこと・試したことと共に記入していただくと、回答が得られやすくなります。

Answer 1

symfony2を触ったことが無いですが、サーバー側でバリデーションしたら、エラーがあるフィールドが判定できると思います。できませんか？？

このことから、対象のフィールドに"error"などのclassを付与できるのではないでしょうか？つまり、エラー発生時だけ表示することができます。

<div class="error">
  <input type="text" value="..." name="email" id="email">
  <div class="error_msg">
    <p>このフィールドを入力してください</p>
  </div>
</div>

として、

.error_msg {
  display:none;
  ...(略)...
  吹き出し風のスタイル
  position: absolute;
}
.error .error_msg {
  display: block;
}

みたいな感じでやれば、エラー時に吹き出しを表示することができます。(吹き出し風のCSSはぐぐってみてください→こういうのhttp://www.cssarrowplease.com/)