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代码缺少括号..

用此

替换您的JS代码

$('.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();
            }
        });
});

现在再次检查它是否正常工作。

Answer 2

将您的js代码更改为，

$('.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();
  }
});

希望这能解决您的问题。

编辑：

$('.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 是你的父元素，并且在你要检查单选按钮是否存在的内部，所以我保持条件考虑相同。

验证单选按钮onClick功能

2 个答案: