ラジオボタンonClick関数の有効性を確認する

Question

ラジオボタンonClick機能の検証が必要です。

HTMLのCODE：

<fieldset> 

    <div class="t box"><h4>T</h4> 

    <div class="radio-buttons-1"> 

    <label class="radio-inline"> 

<input type="radio" name="tw" value="tw15"> 15 

    </label> 

<label class="radio-inline"> 

<input type="radio" name="tw" value="tw16"> 16 

</label> 

</div> 

<br> 

<span class="error-messages-tw" style="display:none; color:#F44336; font-size:16px; font-weight:700;"> 

</span> 

<br><br> 

<div class="tw15 box2"> 

<select name="twg" class="form-control is_twg" onChange="showfield(this.options[this.selectedIndex].value)"> 


<option value="" >Select One</option> 

<option value="twy">Yes</option><option value="twn">No</option> 

</select> 

<br> 

<span class="error-messages-twg" style="display:none; color:#F44336; font-size:16px; font-weight:700;"> 

</span> 

<br><br> 

<div id="div8" class="showMe"><br> 

<h4>Select One Option </h4> 

<div class="radio-buttons-1"> 

<label class="radio-inline"><input type="radio" name="twga" value="a" > a 

</label> 

<label class="radio-inline"><input type="radio" name="twga" value="b" > b 

</label> 

<label class="radio-inline"><input type="radio" name="twga" value="c" > c 

</label> 

<label class="radio-inline"><input type="radio" name="twga" value="d"> d 

</label> 

</div> 

<br> 

<span class="error-messages-twga" style="display:none; color:#F44336; font-size:16px; font-weight:700;"> 

</span> 

<br><br> 

</div> 

<button type="button" class="btn btn-next1">Next 

<i class="fa fa-angle-right"></i> 

</button> 

</fieldset> 

JSコード：事前に

$('.msf-form .btn-next1').on('click', function() { 

    var parent_fieldset = $(this).parents('fieldset'); 

    var next_step = true;  


if(parent_fieldset.find("input[type='radio']").length > 0){ 

     if (!$('input[name="twga"]:visible:checked').val()) { 

     $(".error-messages-twga").text("Please Select option").fadeIn(); 

     next_step = false; 

     } 

else { 

     $(".error-messages-twga").empty().fadeOut(); 

     } 

     } 


parent_fieldset.find('.is_twg:visible').each(function() { 

    if($(this).val() == "") { 

    $(this).focus().css('border','1px solid #F44336'); 

    $(".error-messages-twg").text("Please Select One Option").fadeIn(); 

    next_step = false; 

      } 

    else{ 

    $(this).focus().css('border','0px solid #F44336'); 

    $(".error-messages-twg").empty().fadeOut(); 


     } 
     });  
     }); 

感謝。

Answer 1

すべてのJavaScriptコードは、括弧が欠落しているの最初の..

この

$('.msf-form .btn-next').on('click', function() { 

    var parent_fieldset = $(this).parents('fieldset'); 
    var next_step = true; 


     parent_fieldset.find('.is_abc').each(function() {        
      if($(this).val() == "") { 

       $(".error-messages-abc").text("Please Select option").fadeIn(); 
       next_step = false; 
      } 
      else{ 

      $(".error-messages-abc").empty().fadeOut(); 
      } 
     }); 
}); 

であなたのJSコードを交換して今その作業場合は、再度ご確認ください。

Answer 2

が、これはあなたの問題を解決します

$('.msf-form .btn-next').on('click', function() { 
    var parent_fieldset = $(this).parents('fieldset'); 
    var next_step = true; 
    if (!$('input[name="abc"]:checked').val()) { 
    $(".error-messages-abc").text("Please Select option").fadeIn(); 
    next_step = false; 
    } else { 
    $(".error-messages-abc").empty().fadeOut(); 
    } 
}); 

希望、あなたのjsのコードに変更し

。

EDIT：ここ

$('.msf-form .btn-next').on('click', function() { 
     var parent_fieldset = $(this).parents('fieldset'); 
     var next_step = true; 
     if(parent_fieldset.find("input[type='radio']").length > 0){ 
     if (!$('input[name="abc"]:checked').val()) { 
     $(".error-messages-abc").text("Please Select option").fadeIn(); 
     next_step = false; 
     } else { 
     $(".error-messages-abc").empty().fadeOut(); 
     } 
     } 
    }); 

、私はわからないけど、parent_fieldsetは、あなたの親要素であり、その内側に、あなたはラジオボタンが存在しないか、いないかどうかを確認したいので、私は考える状態を保持しました同じ。