yambejp score 62792
2017/12/06 13:39 投稿
| ちょっと拡大解釈してこんな感じです |
| ```CSS |
| .err{color:red;} |
| ``` |
| ```javascript |
| $(function(){ |
| $('[type=submit]').on('click', function (e){ |
| var names=[]; |
| var f=$(this).closest('form'); |
| f.find('.err').remove(); |
| f.find('input[type=radio][required]:not(:checked)').each(function (){ |
| if(f.find('[name='+$(this).attr('name')+']').filter(':checked').length==0){ |
| names.push($(this).attr('name')); |
| } |
| }); |
| names.filter(function(x,i,self){return self.indexOf(x) === i;}).map(function(x){ |
| f.find('input[name='+x+']').last().closest('label').after( |
| $('<div>').text(f.find('input[name='+x+']').last().data('err-txt')).addClass('err') |
| ); |
| }); |
| }); |
| }); |
| ``` |
| ```HTML |
| <form> |
| <div> |
| <label><input type="radio" name="t1" value="項目1" data-err-txt="問い合わせ項目が選択されていません" required>項目1</label> |
| <label><input type="radio" name="t1" value="項目2" data-err-txt="問い合わせ項目が選択されていません" required>項目2</label> |
| </div> |
| <div> |
| <label><input type="radio" name="t2" value="項目3" data-err-txt="問い合わせ項目が選択されていません" required>項目3</label> |
| <label><input type="radio" name="t2" value="項目4" data-err-txt="問い合わせ項目が選択されていません" required>項目4</label> |
| </div> |
| <input type="submit" value="送信"> |
| </form> |
| <form> |
| <div> |
| <label><input type="radio" name="t3" value="項目5" data-err-txt="問い合わせ項目が選択されていません" required>項目5</label> |
| <label><input type="radio" name="t3" value="項目6" data-err-txt="問い合わせ項目が選択されていません" required>項目6</label> |
| <!-- フォームが違えば同じnameでもOK --> |
| <label><input type="radio" name="t1" value="項目5" data-err-txt="問い合わせ項目が選択されていません" required>項目5</label> |
| <label><input type="radio" name="t1" value="項目6" data-err-txt="問い合わせ項目が選択されていません" required>項目6</label> |
| </div> |
| <input type="submit" value="送信"> |
| </form> |
| ``` |
| ※ただしラジオボタンの同じnameの要素が必ずしも並んで存在するとはかぎらないので |
| 場合によっては見た目がおかしくなると思います |
