フォーム・バリデーションのエラー・メッセージ表示箇所を調整してみる

jqueryのフォーム・バリデーションにとっても便利なプラグインがあります。
Plugins/Validation - jQuery JavaScript Library

入力エラーのある箇所にエラー・メッセージを出してくれて、フォーカスまでしてくれる便利プラグインです。
利用してる方も多いんじゃないのかな?

これを使ってちょっとしたフォームをテストしていたんですが、単純にエラーの出た入力箇所に注意文を出すだけじゃなく、フォームの頭辺りにもデカデカと注意文を出せないかな?と思ってやってみました。

サンプルとなるフォームとCSS

以下みたいなフォームを用意してみました。
「errorMessage」の箇所は、バリデーションを通した際にデカデカと表示される箇所です。
最初は非表示にしておきます。

<style type="text/css">
.errorMessage {
	display: none;
}
.errorMessage {
	background-color: #FFFFCC;
	border: 3px solid #CC0000;
	width: 500px;
	clear: both;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
}
.errorMessage p {
	font-size: 14px;
	margin-bottom: 15px;
	font-weight: bold;
	color: #CC0000;
}
</style>

<div class="errorMessage">
<p>エラーが出ている箇所を確認して、再度入力して下さいな。</p>
</div>

<form method="POST" action="" name="Form" id="Form">
<label for="name1">名前:</label>
<input type="text" name="name" value="" class="required" /><br />
<label for="address">住所:</label>
<input type="text" name="address" value="" class="required" /><br />
<label for="email">メールアドレス:</label>
<input type="text" name="email" value="" class="required email" /><br />
<label for="tel">電話番号:</label>
<input type="text" name="tel" value="" class="required" /><br />

<input type="submit" name="submit" value="送信" />
</form>

jqueryとプラグインを読み込む

先にjqueryを読み込ませて、それからvalidationプラグインを。
メッセージは日本語表示にしたいので個別に用意。
そして「errorMessage」の箇所が、エラー時にデカデカと表示されるように指定。

<script type="text/javascript" src="/js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/jquery.validate.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$().ready(function() {
    var econtainer = $('.errorMessage');
    $("#mainForm").validate({
        messages: {
            name: "名前は入力必須",
            address: "住所は入力必須",
            email: {
                required: "メールアドレスは入力必須",
                email: "メールアドレスの形式で入力"
            },
            tel: {
                required: "電話番号は入力必須"
            }
        },
        errorContainer: econtainer
    });
});
</script>

以上で、フォームの入力エラー時に、(この例では)フォームの上にも注意文を出すことが出来ました丶(・ω・)ノ

あとがき

色んなひとが色んな状況で、色んな見栄えのフォームを利用しますね。
中には、入力欄の近くに注意文が出ていても気付かない・判らない状況も発生すると思います。
そんな状況を考えてみました。

▲ to Top

トラックバック(0)

▲ to Top