Message is poping each time for unselected radio button-CodePudding

I am using jquery to showing message with next button if all the question with radio button not answer but when i use below code message is coming every time when i am clicking next button.I have added HTML code also which have multiple choice question with radio button.If user not able to answer any question than after clicking next button the message will appear.But the message should not show each time clicking next button if question is not answer.

HTML:-

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br>
  <fieldset >
    <div >
      <div >
        <legend id="q1" ><b>1) Question 1</b></legend>
        <div >
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset >
    <div >
      <legend id="q2" ><b>2) Question 2</b></legend>
      <div >
      </div>
    </div>
  </fieldset>
  <fieldset >
    <div >
      <legend id="q3" ><b>3) Question 3</b></legend>
      <div >
      </div>
    </div>
  </fieldset>
  <fieldset >
    <div >
      <legend id="q4" ><b>4) Question 4</b></legend>
      <div >
      </div>
    </div>
  </fieldset>
  <fieldset >
    <div >
      <legend id="q5" ><b>5) QUESTION 5</b></legend>
      <div >
      </div>
    </div>
  </fieldset>
  <div >
    <label for="remarks"><b>Remarks / Observations </b></label>
    <input type="name"  name="Remarks1" id="remarks1" aria-describedby="nameHelp" placeholder="Please enter your Remarks / Observations">
    <small id="nameHelp" >Please enter your Remarks / Observations about these questions.</small>
  </div>
</div>
<br>
<a >Previous</a>
<a >Next</a>
</div>

JS:-

 $(document).ready(function() {
  let ctr = 1;
  $('.answers').each(function(index) {
    let i = index   1
    let html = ` <div >
    <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="1">
    <label  for="gridRadios${ctr}"> Never</label>
    </div>
    <div >
    <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="2">
    <label  for="gridRadios${ctr}">Rarely</label>
    </div>
    <div >
    <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="3">
    <label  for="gridRadios${ctr}">Occasionally</label>
    </div>
    <div >
    <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="4">
    <label  for="gridRadios${ctr}">Often</label>
    </div>
    <div >
    <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="5">
    <label  for="gridRadios${ctr}">Always</label>
    </div>

    <div >
    <input type="button" name="q${i}Remark" value="Remark" onclick="onButtonClick(${i})" />
    <input  type="text" id="textInput${i}" value="" oninput="updateTextBox()" />
    <p>Remaining Characters: <span id="chars-left">100</span></p>
    </div>
    <div >
    <button name="disable${i}" id="na${i}" class='btn-na'>N/A</button>
    </div>
    `
    $(this).html(html);
    ctr  ;
  })

     $('.btnNextS1').click(function() {
        if ($('div.row1:not(:has(:radio:checked)):not(:has(input[disabled]))').length) {
          $('div.row1:not(:has(:radio:checked)):not(:has(input[disabled]))').parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please Answer this question</div>");
        } else {
          //e.stopPropagation();
          console.log('valid');
          $('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a').trigger('click');
        }
      });

CodePudding user response：

I would try something like this:

  $('.btnNextS1').click(function() {
    $("div.row1").each(function() {
      $(this).parent().next(".validation").remove()
      if ($(this).has("input:checked").length > 0) {} else {
        $(this).parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please Answer this question</div>");
      }
    })
    if (!$("div.row1 .validation")) {
      //e.stopPropagation();
      console.log('valid');
      $('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a').trigger('click');
    }
  });

Demo

$(document).ready(function() {
  let ctr = 1;
  $('.answers').each(function(index) {
    let i = index   1
    let html = `<div > <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="1"> <label  for="gridRadios${ctr}"> Never</label> </div> <div > <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="2"> <label  for="gridRadios${ctr}">Rarely</label> </div> <div > <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="3"> <label  for="gridRadios${ctr}">Occasionally</label> </div> <div > <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="4"> <label  for="gridRadios${ctr}">Often</label> </div> <div > <input  type="radio" name="question${i}" id="gridRadios${ctr}" value="5"> <label  for="gridRadios${ctr}">Always</label> </div> <div > <input type="button" name="q${i}Remark" value="Remark" onclick="onButtonClick(${i})" /> <input  type="text" id="textInput${i}" value="" oninput="updateTextBox()" /> <p>Remaining Characters: <span id="chars-left">100</span></p> </div> <div > <button name="disable${i}" id="na${i}" class='btn-na'>N/A</button> </div>`
    $(this).html(html);
    ctr  ;
  })

  $('.btnNextS1').click(function() {
    $("div.row1").each(function() {
      $(this).parent().next(".validation").remove()
      if ($(this).has("input:checked").length > 0) {} else {
        $(this).parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please Answer this question</div>");
      }
    })
    if ($("div.row1").filter(function() {
        return $(this).parent().next().hasClass("validation")
      }).length == 0) {
      //e.stopPropagation();
      console.log('valid');
      $('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a').trigger('click');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br>
  <fieldset >
    <div >
      <div >
        <legend id="q1" ><b>1) Question 1</b></legend>
        <div >
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset >
    <div >
      <legend id="q2" ><b>2) Question 2</b></legend>
      <div >
      </div>
    </div>
  </fieldset>
  <fieldset >
    <div >
      <legend id="q3" ><b>3) Question 3</b></legend>
      <div >
      </div>
    </div>
  </fieldset>
  <fieldset >
    <div >
      <legend id="q4" ><b>4) Question 4</b></legend>
      <div >
      </div>
    </div>
  </fieldset>
  <fieldset >
    <div >
      <legend id="q5" ><b>5) QUESTION 5</b></legend>
      <div >
      </div>
    </div>
  </fieldset>
  <div >
    <label for="remarks"><b>Remarks / Observations </b></label>
    <input type="name"  name="Remarks1" id="remarks1" aria-describedby="nameHelp" placeholder="Please enter your Remarks / Observations">
    <small id="nameHelp" >Please enter your Remarks / Observations about these questions.</small>
  </div>
</div>
<br>
<a >Previous</a>
<a >Next</a>
</div>