Warning: include(/home/users/2/lolipop.jp-a-virtual/web/dhmo/dhmo/wp-content/advanced-cache.php): failed to open stream: No such file or directory in /home/users/2/lolipop.jp-a-virtual/web/dhmo/dhmo/wp-settings.php on line 74

Warning: include(/home/users/2/lolipop.jp-a-virtual/web/dhmo/dhmo/wp-content/advanced-cache.php): failed to open stream: No such file or directory in /home/users/2/lolipop.jp-a-virtual/web/dhmo/dhmo/wp-settings.php on line 74

Warning: include(): Failed opening '/home/users/2/lolipop.jp-a-virtual/web/dhmo/dhmo/wp-content/advanced-cache.php' for inclusion (include_path='.:/usr/local/php/5.4/lib/php') in /home/users/2/lolipop.jp-a-virtual/web/dhmo/dhmo/wp-settings.php on line 74
【JavaScript】チェックボックスのバリデーション|チェックが1つもなかったらその場にエラーを書き出す。 – Androidアプリつくったった

【JavaScript】チェックボックスのバリデーション|チェックが1つもなかったらその場にエラーを書き出す。

【お問い合わせフォーム】チェックボックスのバリデーション|チェックが1つもなかったらその場にエラーを書き出す。

【JavaScript】チェックボックスのバリデーション|チェックが1つもなかったらその場にエラーを書き出す。

お問い合わせ画面の入力チェックで割と厄介なのがチェックボックスです。
jQueryに頼っているとちょっとした仕様の変更への対応が苦しくなるので
javascriptで直に書いてみることをオススメします。
 
▼ 今回その中でも実際使い勝手が良かったものを紹介します。
 

この手法はWordPressはもちろんJoomla等で
jQueryがうまく動かない環境でも動作します。

【お問い合わせフォーム】チェックボックスのバリデーション|チェックが1つもなかったらその場にエラーを書き出す。
 
JavaScriptサイドとHTMLサイドの両方に記述が必要です。
nameの設定などケアレスミスの内容に注意しましょう。

【JavaScript】のソース

今回は、入力画面から遷移する前にチェックするので、

入力画面のソースで読み込まれるようにしましょう。

ヘッダーの読み込みでも、body以下のスクリプトにしてもどちらでも動作します。
 
▼ では早速ソースをチェックしていきましょう。
 

function submitAfterValidation() {
        var invalid = true;
   	   //チェックボックス
            var i;
            var content = false;
            for( i = 0; i < document.form1.elements['ck[]'].length; i++){
                if (document.form1.elements['ck[]'][i].checked){
                    content= true;
                     break;
                }
            }
            if (!content) {
                document.getElementById( 'notice-check' ).style.display ="block";
                invalid = false;
            }else{
               document.getElementById( 'notice-check' ).style.display = "none"; 
   	    }
   if(!invalid){
       return false;
   } 
}

【HTML側のソース】
PHPの想定で書いています。必要に応じて変更してください。
※ボタンはスタイルシートで調整してください。
ポイントは以下の3点です。

① nameの中身をすべて同じ名前の配列にすること
② div内のメッセージの表示位置の調整ははじめは
  display:blockにして先に行っておくこと
③ onClickで関数を呼び出す際の記述に注意すること

 

<input type="checkbox" name="ck[]" value="資料請求や製品について"<?if ($ck=="資料請求や製品について"){echo " checked";}?>> 資料請求や製品について
<input type="checkbox" name="ck[]" value="製作依頼について"<?if ($ck=="製品のご購入について"){echo " checked";}?>> 製作依頼について
<input type="checkbox" name="ck[]" value="技術サポート"<?if ($ck=="技術サポート"){echo " checked";}?>> 技術サポート
<input type="checkbox" name="ck[]" value="その他"<?if ($ck=="その他"){echo " checked";}?>> その他
<div id="notice-check" style="display: none; color: red; margin-top: 0px;">【お問い合わせ内容にチェックして下さい】</div>
<!-- ▼ ボタンで関数を呼び出す。 -->
<input type="submit" name="confirm" value="" onclick="return submitAfterValidation();"  id="submit" style="border:0;">

後はスタイルシートで要望に合わせ柔軟に対応していくことが可能です。
 
以上です。
 

参考になれば幸いです。
 

▼ 関連記事・最近の投稿は記事の下にあります。コチラもご参考ください。

 

About the Author

dhmo
Author:DHMO(ディベロッパー名) 仕事では自社サービス・メディアの開発を行ってます。 趣味でAndroidアプリ製作を行っています。 カラオケではランキングバトルにはまっております。 Mail: dihydromooxide7@gmail.com 

Be the first to comment on "【JavaScript】チェックボックスのバリデーション|チェックが1つもなかったらその場にエラーを書き出す。"

Leave a comment

Your email address will not be published.


*