Javascript 如何仅使用类验证表单？

我有一个单选按钮，有一个相同的类

这个单选按钮是动态的，这就是为什么我考虑使用这个类进行验证

这是我的密码

$（'listening'u choices'u wrapper'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
$（“.validation\u radio”）。每个（函数（）{
});
});

引导示例

1.问题1？

测试1
测试2
测试3
测试4

2.问题2？

测试5
测试6
测试7
测试8
提交
您可以将
required
属性添加到所有输入标记中，以进行本机浏览器验证：

<div id="question_choices" class="listening_question_choice">
  <input type="radio" class="validation_radio" name="answer_choice_0" value="17" required>
  <label>Test 1</label>
  <input type="radio" class="validation_radio" name="answer_choice_0" value="18" required>
  <label>Test 2</label>
  <input type="radio" class="validation_radio" name="answer_choice_0" value="19" required>
  <label>Test 3</label>
  <input type="radio" class="validation_radio" name="answer_choice_0" value="20" required>
  <label>Test 4</label>
</div>


测试1
测试2
测试3
测试4

但为了回答您的问题，我编写了以下jQuery脚本：

$('#listening_choices_wrapper').on('submit', function(e) {
    $('.error').remove()
    e.preventDefault();
    
    $('.listening_question_choice').each((i, e) => {
        let valid = false
        $(e).find('.validation_radio').each((i ,e) => {
            if($(e).prop("checked")) {
                valid = true
            }
        })
        if (!valid) {
            $(e).append('<div class="error" style="color: red;">Error: this radio is required!</div>')
        }
    })
});

$（'listening'u choices'u wrapper'）。关于（'submit'，函数（e）{
$（'.error'）.remove（）
e、 预防默认值（）；
$（“.听力\问题\选择”）。每个（（i，e）=>{
设valid=false
$（e）.查找（'.validation_radio'）。每个（（i，e）=>{
如果（$（e）.prop（“选中”））{
有效=真
}
})
如果（！有效）{
$（e）.append（'错误：此收音机是必需的！'）
}
})
});

我希望这有帮助
 我建议您将每个答案库包装在一个
字段集
元素中，并将全班放在该元素上。然后，您可以对每个元素进行迭代（就像您在代码中所做的那样），查看是否没有
输入
元素是
：选中的

if($(this).find("input:checked").length == 0){
  // no answer given
}

然后，您还可以使用某种标签来改进发送给用户的消息，如果没有找到任何答案，请调用
e.preventDefault（）

下面是一个活生生的例子：


$（'listening'u choices'u wrapper'）。关于（'submit'，函数（e）{
var missingAnswers=[]；
$（“.validation\u radio”）。每个（函数（）{
if（$（this）.find（“输入：选中”）.length==0）{
丢失应答推送（$（this）.data（“标签”）；
}
});
如果（缺失应答长度>0）{
e、 预防默认值（）；
警报（`您缺少对：${missingAnswers}`的答案`）
}
});

引导示例

1.问题1？

测试1
测试2
测试3
测试4

2.问题2？

测试5
测试6
测试7
测试8
提交
检查每个问题是否有一个选中的单选按钮。如果没有，那么调用
preventDefault（）
。我该怎么做，先生？我想这就是我问题的解决方案，先生，我将把它实现到我的代码中。非常感谢，先生。