●スクリプト
<script type="text/javascript">
$(function(){
$("form").submit(function(){
var err = 0;
if($("input[name='postcode']").val()==""){
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()==""){
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()==""){
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()==""){
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
});
</script>
●HTML
<form action="sendmail.php" method="post">
<p>郵便番号（必須）<input type="text" name="postcode" /></p>
<p>お届け先のご住所（必須）<input type="text" name="address" /></p>
<p>お名前（必須）<input type="text" name="name" /></p>
<p>メールアドレス（必須）<input type="text" name="mail" /></p>
<input type="submit" value="送信" />
</form>
●解説
jQueryの.submit(function()で、
<input type="submit" value="送信" /> クリック時の
動作を指定できる。
ifで.val()==""を判定することで、未入力かどうかをチェックしている。
未入力の場合は、赤枠で囲んで赤字のメッセージを表示する。
入力された場合は、グレーの囲み枠にする。
jQueryではreturn false;によって、post送信を無効にできる。
未入力項目がある場合は、変数errに1が設定されるので、
return false;が実行され、post送信は実行されない。
サンプルソース
コメント
コメントを書く