Wie überprüft man, ob mindestens ein Optionsfeld aktiviert ist

Question

Ich bin tatsächlich auf meiner Formularvalidierung fest, weil ich überprüfen möchte, ob mindestens ein Optionsfeld aktiviert ist. Ich habe dies für meine Texteingabeüberprüfung erfolgreich gemacht, aber für die Optionsfelder funktioniert es nicht.

$('#next').click(function() { 
 
    var isValid = true; 
 
    $('.personal-informations, .gender, .goal').each(function(i, obj) { //.personal-informations are my text inputs in another section of my form and .gender and .goal are my radio button classes 
 
     if ($(this).val().trim() === '') { 
 
      $("html, body").animate({scrollTop: $('.progressbar-header').offset().top-100}, 250); 
 
      $(this).closest('.questions').find('.error').css("visibility","visible"); 
 
      $(this).css('border-color', "#B33C3D"); 
 
      $(this).closest('.questions').find('.error').text('Dies ist ein Pflichtfeld.'); 
 
      isValid = false; 
 
     } 
 
     if ($(this).is(':checked').length > 0) { 
 
     } else { 
 
      $(this).closest('.questions').find('.error').css("visibility","visible"); 
 
      $(this).closest('.questions').find('.error').text('This field is required.'); 
 
      isValid = false; 
 
     } 
 
    }); 
 
});

<div class="field goals-icon goals"> 
 
    <span class="title">Some Text</span> 
 
    <div class="questions"> 
 
     <div class="questions-fc-1 questions-fcm-2 radio-button"> 
 
      <input id="muscle-goal_1" name="goal" class="goal" value="1" aria-required="true" type="radio"> 
 
      <label id="fc-goal_1" aria-controls="#muscle-goal_1"> 
 
       <img src="" alt=""> 
 
       <span>Some Text</span> 
 
        <div class="error"></div><!--This is my error class which should be visible if there is no checkbox from this section checked--> 
 
      </label> 
 
     </div> 
 
     <div class="questions-fc-1 questions-fcm-2 radio-button"> 
 
      <input id="weight-loss-goal_2" name="goal" class="goal" value="2" aria-required="true" type="radio"> 
 
      <label id="fc-goal_2" aria-controls="#weight-loss-goal_2"> 
 
       <img src="" alt=""> 
 
       <span>Some Text</span> 
 
      </label> 
 
     </div> 
 
     <div class="questions-fc-1 questions-fcm-2 radio-button"> 
 
      <input id="figure-workout-goal_3" name="goal" class="goal" value="3" aria-required="true" type="radio"> 
 
      <label id="fc-goal_3" aria-controls="#figure-workout-goal_3"> 
 
       <img src="" alt=""> 
 
       <span>Some Text</span> 
 
      </label> 
 
     </div> 
 
     <div class="questions-fc-1 questions-fcm-2 radio-button"> 
 
      <input id="health-goal_4" name="goal" class="goal" value="4" aria-required="true" type="radio"> 
 
      <label id="fc-goal_4" aria-controls="#health-goal_4"> 
 
       <img src="" alt=""> 
 
       <span>Some Text</span> 
 
      </label> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div type="next" id="next" class="forward-button"></div>

Answer 1

.is() kehrt wahr, falsch oder nicht definiert ist, die Überprüfung so für die Wahrheit, ohne dass die .length funktioniert. Außerdem müssen Sie diesen bedingten Faktor neu berechnen, um den Domänenbaum zum Container (oder Formular) zu verschieben, und dann nach Geschwistern suchen.

ersetzen diese: if ($(this).is(':checked').length > 0) {

mit diesem: if ($(this).parents('.questions').find('input[type="radio"]').is(':checked')) {

Basierend auf Ihrem Beispiel, ich bin nicht sicher, ob Sie die .parents() oder .find() Selektoren optimieren müssen. Möglicherweise müssen Sie sie spezifischer machen, um bei den Funkgruppen zu bleiben (anstatt alle Funkgeräte zu finden). Hier ist eine Demo, schauen Sie sich die Konsole an und es wird eine Protokollvalidierung fehlgeschlagen: https://jsfiddle.net/jpnaccn3/