Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29
formの同意確認をチェックしないとエラーメッセージを表示する。 - CodingMania

2011/4/24

formの同意確認をチェックしないとエラーメッセージを表示する。

inputのチェックボックスに同意(チェック)しないとエラーメッセージ表示します。

ヘッダーで、jquery.jsと後述のformcheck.jsを読み込んでいます。

JSを読み込みます

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/formcheck.js"></script> 

[formcheck.js]JavaScript

$(function(){
	//チェックを外す
	$(".mod_form001 p.check input:checkbox").attr('checked',false);
	//
	$(".mod_form001 p.btn input").click(function(){
		if($(".mod_form001 p.check input:checkbox").prop('checked')==true){
    	location.href = 'https://codingmania.net/';
		}else{
     	$(".mod_form001 p.error").css("display","block");
		}
    })
});

HTMl

<div class="mod_form001">
<p class="error">同意できない場合は、<br />
ここにエラーメッセージ表示。</p>
<form action="javascript:void(0)">
<p class="check"><input type="checkbox" name="check" id="check" value="同意する" /> <label for="check">同意する</label></p>
<p class="btn"><input type="image" src="img/button.gif" alt="送信する" onmouseover="this.src='img/button_on.gif'" onmouseout="this.src='img/button.gif'" /></p>
</form>
<!--mod_form001_end--></div>

CSS

/* 注意書きスタイル設定 */
.mod_form001 p.error{
	display:none;
	font-weight:bold;
	color:#C00;
}

/* フォーム枠 */
.mod_form001{
	width:262px;
	padding:10px;
	text-align:center;
	border:solid 1px #CCC;
}