如何仅使用 class 验证我的表单？

Question

我有具有相同 class 的单选按钮。

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

这是我的代码。

 $('#listening_choices_wrapper').on('submit', function(e) { e.preventDefault(); $(".validation_radio").each(function() { }); });

 <,DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <form id="listening_choices_wrapper"> <div class="listening_question_scenario"> <p id="display_question_scenario"> 1? Question 1. </p> </div> <div id="question_choices" class="listening_question_choice"> <input type="radio" class="validation_radio" name="answer_choice_0" value="17"> <label>Test 1</label> <input type="radio" class="validation_radio" name="answer_choice_0" value="18"> <label>Test 2</label> <input type="radio" class="validation_radio" name="answer_choice_0" value="19"> <label>Test 3</label> <input type="radio" class="validation_radio" name="answer_choice_0" value="20"> <label>Test 4</label> </div> <div class="listening_question_scenario"> <p id="display_question_scenario"> 2? Question 2? </p> </div> <div id="question_choices" class="listening_question_choice"> <input type="radio" class="validation_radio" name="answer_choice_1" value="17"> <label>Test 5</label> <input type="radio" class="validation_radio" name="answer_choice_1" value="18"> <label>Test 6</label> <input type="radio" class="validation_radio" name="answer_choice_1" value="19"> <label>Test 7</label> <input type="radio" class="validation_radio" name="answer_choice_1" value="20"> <label>Test 8</label> </div> <button type="submit" class="btn">Submit</button> </form> </body> </html>

我怎样才能验证它们？ 使用户无法提交。

任何帮助将非常感激。

Answer 1

您可以将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>

但是为了回答你的问题，我写了这个 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>')
        }
    })
});

我希望这有帮助！

Answer 2

我建议您将每组答案都包装在一个字段集元素中，然后将fieldset放在上面。 然后您可以遍历每个元素（就像您在代码中所做的那样）并查看是否没有:checked的input元素

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

然后，您还可以使用某种类型的 label 来改进向用户发送的消息 - 如果错过任何答案，则只调用e.preventDefault() 。

现场示例如下：

 $('#listening_choices_wrapper').on('submit', function(e) { var missingAnswers = []; $(".validation_radio").each(function() { if($(this).find("input:checked").length == 0){ missingAnswers.push($(this).data("label")); } }); if(missingAnswers.length > 0){ e.preventDefault(); alert(`You are missing answers to: ${missingAnswers}`) } });

 <,DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <form id="listening_choices_wrapper"> <div class="listening_question_scenario"> <p id="display_question_scenario"> 1? Question 1. </p> </div> <div id="question_choices" class="listening_question_choice"> <fieldset class="validation_radio" data-label="answer1"> <input type="radio" name="answer_choice_0" value="17"> <label>Test 1</label> <input type="radio" name="answer_choice_0" value="18"> <label>Test 2</label> <input type="radio" name="answer_choice_0" value="19"> <label>Test 3</label> <input type="radio" name="answer_choice_0" value="20"> <label>Test 4</label> </fieldset> </div> <div class="listening_question_scenario"> <p id="display_question_scenario"> 2? Question 2? </p> </div> <div id="question_choices" class="listening_question_choice"> <fieldset class="validation_radio" data-label="answer2"> <input type="radio" name="answer_choice_1" value="17"> <label>Test 5</label> <input type="radio" name="answer_choice_1" value="18"> <label>Test 6</label> <input type="radio" name="answer_choice_1" value="19"> <label>Test 7</label> <input type="radio" name="answer_choice_1" value="20"> <label>Test 8</label> </fieldset> </div> <button type="submit" class="btn">Submit</button> </form> </body> </html>

如何仅使用 class 验证我的表单？

问题描述

2 个解决方案

解决方案1
1 2020-11-12 13:56:30

解决方案2
0 已采纳 2020-11-12 13:57:41

如何仅使用 class 验证我的表单？

问题描述

2 个解决方案

解决方案1 1 2020-11-12 13:56:30

解决方案2 0 已采纳 2020-11-12 13:57:41

解决方案1
1 2020-11-12 13:56:30

解决方案2
0 已采纳 2020-11-12 13:57:41