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; }