Question

我实际上坚持我的表单验证，因为我想检查是否至少检查了一个单选按钮。我这样做是为了我的文本输入验证成功但是对于单选按钮它没有用。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

.is()返回true，false或undefined，因此在没有.length的情况下检查真相。此外，您需要重新计算条件以将dom树遍历到容器（或表单），然后在其中查找兄弟。

替换这个： if ($(this).is(':checked').length > 0) {

有了这个： if ($(this).parents('.questions').find('input[type="radio"]').is(':checked')) {

根据您的示例，我不确定您是否需要调整.parents()或.find()选择器。您可能需要使它们更具体，以便坚持无线电组（而不是找到所有无线电）。这是一个演示，看看控制台，它将记录验证失败：https://jsfiddle.net/jpnaccn3/

如何检查是否至少选中了一个单选按钮

1 个答案: