jQueryのvalidata.jsを使って、チェックボックスのバリデーターチェックをしようかと考えております。CSS3を使って、デザイン性のあるチェックボックスを作ろうとすると、validata.jsが上手く機能しないみたいなのです。
除外すると、うまく機能するみたいですが…何か良い手があれば教えて頂ければと存じます。お忙しい中、恐縮ですが宜しくお願い致します。
HTML・javascript
1<!doctype html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>jQueryの実験</title> 6 <link href="style.css" rel="stylesheet" type="text/css"> 7 <link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 8 <link href="sytle.css" rel="stylesheet" type="text/css"> 9 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script> 10 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script> 11 <script type="text/javascript" src="jquery.validate.min.js"></script> 12 <script type="text/javascript"> 13 $(document).ready(function(){ 14 $("#form").validate({ 15 rules:{ 16 'japan[]': {required: true} 17 }, 18 messages :{ 19 'japan[]':{required: "どれか一つは選んでくださいm(_ _)m"} 20 }, 21 errorPlacement :function(error,element){ 22 if (element.attr("name") == "japan[]" ){ 23 error.insertAfter("#error"); 24 } else { 25 error.insertAfter(element); 26 } 27 } 28 }); 29 }); 30 </script> 31 </head> 32 <body> 33 <form action ="" method="get" id="form"> 34 <p id="prefer">好きな都道府県は</p> 35 <div id="error"></div> 36 <div class="chkId"> 37 <p class="font">神奈川県</p> 38 <label> 39 <input type="checkbox" name="japan[]" value="1" class="required"> 40 <span class="image"></span></label> 41 </div> 42 <div class="chkId"> 43 <p class="font">東京都</p> 44 <label> 45 <input type="checkbox" name="japan[]" value="2" class="required"> 46 <span class="image"></span></label> 47 </div> 48 <div class="chkId"> 49 <p class="font">千葉県</p> 50 <label> 51 <input type="checkbox" name="japan[]" value="3" class="required"> 52 <span class="image"></span></label> 53 54 55 </div> 56 <div class="chkId"> 57 <p class="font">埼玉県</p> 58 <label> 59 <input type="checkbox" name="japan[]" value="4" class="required"> 60 <span class="image"></span></label> 61 </div> 62 <div class="chkId"> 63 <p class="font">群馬県</p> 64 <label> 65 <input type="checkbox" name="japan[]" value="5" class="required"> 66 <span class="image"></span></label> 67 68 </div> 69 <input type="submit" value="送信する" id="send" class="send" name="send" style="width:100px; height:30px;"> 70 </form> 71 </body> 72</html>
css3
1@charset "utf-8"; 2/* 3html5doctor.com Reset Stylesheet 4v1.6.1 5Last Updated: 2010-09-17 6Author: Richard Clark - http://richclarkdesign.com 7Twitter: @rich_clark 8*/ 9 10html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { 11 margin: 0; 12 padding: 0; 13 border: 0; 14 outline: 0; 15 font-size: 100%; 16 vertical-align: baseline; 17 background: transparent; 18} 19body { 20 line-height: 1.1em; 21} 22article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 23 display: block; 24} 25nav ul { 26 list-style: none; 27} 28blockquote, q { 29 quotes: none; 30} 31blockquote:before, blockquote:after, q:before, q:after { 32 content: ''; 33 content: none; 34} 35a { 36 margin: 0; 37 padding: 0; 38 font-size: 100%; 39 vertical-align: baseline; 40 background: transparent; 41 text-decoration: none; 42} 43 change colours to suit your needs ins { 44background-color:#ff9; 45color:#000; 46text-decoration:none; 47} 48 change colours to suit your needs mark { 49background-color:#ff9; 50color:#000; 51font-style:italic; 52font-weight:bold; 53} 54del { 55 text-decoration: line-through; 56} 57abbr[title], dfn[title] { 58 border-bottom: 1px dotted; 59 cursor: help; 60} 61table { 62 border-collapse: collapse; 63 border-spacing: 0; 64} 65/* change border colour to suit your needs 66*/ 67hr { 68 display: block; 69 height: 1px; 70 border: 0; 71 border-top: 1px solid #cccccc; 72 margin: 1em 0; 73 padding: 0; 74} 75input, select { 76 vertical-align: middle; 77} 78/* --------------------------- reset ここまで ---------------------------- */ 79 80section, aiticle, div, header, footer, nav { 81 display: block; 82} 83body { 84 font-size: 100%; 85 color: black; 86 font-weight: normal; 87 font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; 88 vertical-align: baseline; 89 background: white; 90} 91 92#prefer{ 93 margin-top: 20px; 94 margin-bottom: 50px; 95 text-align: center; 96} 97 98.chkId{ 99 width: 600px; 100 height: 100px; 101 margin-left: auto; 102 margin-right: auto; 103 border:1px solid #CCC;padding:10px;border-radius:10px; 104} 105 106.font { 107 display: block; 108 font-size: 18px; 109 width:145px; 110 height:20px; 111 margin-top: 43px; 112 margin-left: 20px; 113 float:left; 114} 115 116 117label{ 118 position: relative; 119 margin-left: 220px; 120 width:130px; 121 height:60px; 122} 123label input{ 124 display: none; 125} 126label .image{ 127 position: absolute; 128 left: 0; 129 top:1.2em; 130 display: block; 131 background: url(buttonOff.png) no-repeat 0 0; 132 width: 130px; 133 height: 60px; 134} 135label input:checked + .image{ 136 background:url(buttonOn.png) no-repeat 0 0; 137 138} 139 140#send{ 141 margin: 50px; 142 margin-left: 650px; 143} 144
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/02 22:49
2017/05/03 03:30