ラジオボタンを使ってお問い合わせ内容の2種類どちらかを選択させる項目のあるフォームを制作しています。
その際に、お問い合わせ項目は必須にし、尚且つ選択がされていない場合、
項目の下に赤いテキストで「問い合わせ項目が選択されていません」と表示をさせたいのですが、
項目1と項目2どちらかを選択していてもエラー文が2つ表示されたりなど、
なかなか思うような組み方ができず、苦戦をしています…。
どなたかご教授いただけないでしょうか。
不慣れな組み方でお見苦しいのですが、下記がコードになります。
html
1<form> 2<label id="nameWrap" for="type">問い合わせ項目<span class="required">[必須]</span></label> 3 <div class="formWrap"> 4 <label><input type="radio" name="type" id="type1" value="項目1" data-err-txt="問い合わせ項目が選択されていません" required="required"><span>項目1</span></label> 5 <label><input type="radio" name="type" id="type2" value="項目2" data-err-txt="問い合わせ項目が選択されていません" required="required"><span>項目2</span></label> 6 </div> 7 <input name="submitBtn" id="submitBtn" type="submit" value="送信"> 8</form>
javascript
1$('#submitBtn').on('click', function (e){ 2 e.preventDefault(); 3 require = true; 4 $('.error').remove(); 5 $('[required="required"]:not(:disabled)').each(function (i, el){ 6 if ( ! $(el).val() || ( $(el).is('[type="radio"]') && ! $(el).is(':checked') ) ){ 7 require = false; 8 $(el).parents('.formWrap').append('<span class="error">'+ $(el).data('err-txt') +'</span>'); 9 } 10 }); 11 });
CSS
1span.error { 2 display: block; 3 color: #F00; 4 font-weight: bold; 5}
表示イメージとしては下記の図のようなものを想定しております。
何卒よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー