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

Question

I have radio buttons that has a same class.我有具有相同 class 的单选按钮。

and this radio buttons is dynamic, that's why I am thinking on using the class for validation.这个单选按钮是动态的，这就是为什么我正在考虑使用 class 进行验证。

Here is my code.这是我的代码。

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

How can I validate them?我怎样才能验证它们？ so that the user can't submit it.使用户无法提交。

Any help would be really appreciated.任何帮助将非常感激。

Answer 1

You can add the required attribute to all the input tags for native browser validation:您可以将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>

But to answer your question, I wrote this jQuery script:但是为了回答你的问题，我写了这个 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>')
        }
    })
});

I hope this helps!我希望这有帮助！

Answer 2

I would suggest that you wrap each bank of answers in a fieldset element, and put the class on that.我建议您将每组答案都包装在一个字段集元素中，然后将fieldset放在上面。 You can then iterate over those with each (as you did in your code) and look to see whether there are no input elements that are :checked然后您可以遍历每个元素（就像您在代码中所做的那样）并查看是否没有:checked的input元素

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

You can then also use some sort of label to improve the message to the user - and if any answers missed only then call e.preventDefault() .然后，您还可以使用某种类型的 label 来改进向用户发送的消息 - 如果错过任何答案，则只调用e.preventDefault() 。

Live example below:现场示例如下：

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