jQueryでフォームの未入力チェック機能を作る

●スクリプト

<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送信は実行されない。

サンプルソース

http://tokyo-webs.jp/sample_source/130331b/

東京ウェブ制作