●スクリプト
<script type="text/javascript">
$(function(){
var example_postcode = "例）140-0013";
var example_address = "例）東京都品川区南大井2-12-1-407";
var example_name = "例）大和賢一郎";
var example_mail = "例）yamato@1mouke.com";
$("form").submit(function(){
var err = 0;
if($("input[name='postcode']").val()=="" || $("input[name='postcode']").val()==example_postcode){
if($("span#postcode").css("color") != "red"){
$("input[name='postcode']").css("border","1px solid red").after("<span id='postcode'> 郵便番号を入力してください</span>");
$("span#postcode").css("color","red");
}
err = 1;
}else{
$("input[name='postcode']").css("border","1px solid gray");
$("span#postcode").text("");
$("span#postcode").css("color","gray");
}
if($("input[name='address']").val()=="" || $("input[name='address']").val()==example_address){
if($("span#address").css("color") != "red"){
$("input[name='address']").css("border","1px solid red").after("<span id='address'> 住所を入力してください</span>");
$("span#address").css("color","red");
}
err = 1;
}else{
$("input[name='address']").css("border","1px solid gray");
$("span#address").text("");
$("span#address").css("color","gray");
}
if($("input[name='name']").val()=="" || $("input[name='name']").val()==example_name){
if($("span#name").css("color") != "red"){
$("input[name='name']").css("border","1px solid red").after("<span id='name'> お名前を入力してください</span>");
$("span#name").css("color","red");
}
err = 1;
}else{
$("input[name='name']").css("border","1px solid gray");
$("span#name").text("");
$("span#name").css("color","gray");
}
if($("input[name='mail']").val()=="" || $("input[name='mail']").val()==example_mail){
if($("span#mail").css("color") != "red"){
$("input[name='mail']").css("border","1px solid red").after("<span id='mail'> メールアドレスを入力してください</span>");
$("span#mail").css("color","red");
}
err = 1;
}else{
$("input[name='mail']").css("border","1px solid gray");
$("span#mail").text("");
$("span#mail").css("color","gray");
}
if(err==1){
return false;
}
}); // end of submit
$("input#name").val(example_name).css("color","#999")
.one("focus",function(){
$(this).val("").css("color","#000")
});
$("input#mail").val(example_mail).css("color","#999")
.one("focus",function(){
$(this).val("").css("color","#000")
});
$("input#postcode").val(example_postcode).css("color","#999")
.one("focus",function(){
$(this).val("").css("color","#000")
});
$("input#address").val(example_address).css("color","#999")
.one("focus",function(){
$(this).val("").css("color","#000")
});
});
</script>
●HTML
<form action="sendmail.php" method="post">
<p>お届け先の郵便番号 <input id="postcode" type="text" name="postcode" /></p>
<p>お届け先のご住所 <input id="address" type="text" name="address" /></p>
<p>お名前 <input id="name" type="text" name="name" /></p>
<p>メールアドレス <input id="mail" type="text" name="mail" /></p>
<input type="submit" value="送信" />
</form>
●CSS
input#postcode{
width:140px;
}
input#address{
width:360px;
}
input#name{
width:200px;
}
input#mail{
width:200px;
}
●解説
jQueryのfocusを使えば、フォーム内に記入例を表示できる。
フォームがフォーカスされたタイミングで記入例が消える。
なお、未入力チェックの処理において、記入例がそのままだと
未入力ではなく入力済みとして認識されるので
それを防ぐために
|| $("input[name='postcode']").val()==example_postcode
を入れている。
サンプルソース
ブロマガ会員ならもっと楽しめる！
- 会員限定の新着記事が読み放題！※1
- 動画や生放送などの追加コンテンツが見放題！※2
-
- ※1、入会月以降の記事が対象になります。
- ※2、チャンネルによって、見放題になるコンテンツは異なります。
東京ウェブ制作ブロマガ
大和賢一郎
月額：￥550 (税込)
コメント
コメントはまだありません
コメントを書き込むにはログインしてください。
