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>以上で、フォームの入力エラー時に、(この例では)フォームの上にも注意文を出すことが出来ました丶(･ω･)ノ
あとがき
色んなひとが色んな状況で、色んな見栄えのフォームを利用しますね。
中には、入力欄の近くに注意文が出ていても気付かない・判らない状況も発生すると思います。
そんな状況を考えてみました。
