CODEWITHSUNDEEP
javascriptjqueryhtmlformsvalidation
Test
Test

Reputation: 45

validate radio button onClick function

Need to do validation on radio buttons onClick function.

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 Code :

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


        }
        });       
      });

Thanks in advance.

Upvotes: 0

Views: 1159

Answers (2)

Rahul
Rahul

Reputation: 18557

Change your js code to,

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

Hope this will solve your problem.

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

Here, I am not sure, but parent_fieldset is your parent element, and inside that you want to check if radio buttons exist or not, so I kept condition considering the same.

Upvotes: 0

Minksmnm
Minksmnm

Reputation: 264

first of all your javascript code has missing brackets..

Replace your JS Code with this

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

Now check again if its working.

Upvotes: 1

Related Questions