• このエントリーをはてなブックマークに追加
jQueryでフォームの未入力チェック機能を作る
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

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

2013-03-31 16:36
    ●スクリプト
    <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送信は実行されない。

    サンプルソース

    チャンネル会員ならもっと楽しめる!
    • 会員限定の新着記事が読み放題!※1
    • 動画や生放送などの追加コンテンツが見放題!※2
      • ※1、入会月以降の記事が対象になります。
      • ※2、チャンネルによって、見放題になるコンテンツは異なります。
    ブログイメージ
    東京ウェブ制作ブロマガ
    更新頻度: 不定期
    最終更新日:
    チャンネル月額: ¥550 (税込)

    チャンネルに入会して購読

    コメントを書く
    コメントをするにはログインして下さい。