jquery 验证不适用于相关的 html

Question

http://jsfiddle.net/7sARw/17/

上面是我的应用程序的 jsfiddle。很抱歉，小提琴中有很多代码，但需要这些代码才能使应用程序正常工作，我确实尝试过大量减少代码。

但请按照以下步骤使用 jsfiddle：

1. 当您打开 fiddle 时，单击“Open Grid”链接并选择“True or False”选项。您将看到“True”和“False”按钮出现，以及一个显示 1 的文本输入。

2. 如果您单击“添加问题”按钮，则会出现一条警报，指出您选择的答案少于要求的数量。这是正确的，因为文本输入表明您需要1 的答案数量，但您尚未选择答案。所以选择“真”或“假”，然后点击“添加问题”按钮。

3. 您会看到它在您输入的内容的表格中追加了一行。现在在该行中关闭所选按钮，以便“True”或“False”按钮都不会打开。现在在应用程序的底部单击“提交详细信息”按钮。您意识到没有出现提示您选择的答案较少的提醒。

这是我遇到的问题，当我单击“提交详细信息”按钮时，为什么没有出现提示您选择的答案较少的警报？我知道提交按钮将显示其他验证消息，因此我调用该函数的方式没有任何问题，它在 validation() 函数中，我试图验证我遇到问题时选择的答案数量。

下面是 jsfiddle 底部的验证代码：

 function validation() {

    var marks = parseInt($("#total-weight").text());
    var _qid = "";
    var _msg = "";

    var maxQuestions = 5;
    var questionsAdded = $('tr.optionAndAnswer').length;

    var alertValidation = "";
    // Note, this is just so it's declared...
    $("tr.optionAndAnswer").each(function () {


        _qid = $("td.qid", this).text();
        _msg = "You have errors on Question Number: " + _qid + "\n";

        $(".numberAnswerTxtRow", this).each(function () {


            var currenttotal = $(this).closest('.optionAndAnswer').find('.answerBtnsOn').length;

            if (currenttotal < $(this).val()) {
                alertValidation += "\n\u2022 You have selected less answers than the required amount\n";
            }

            if (alertValidation != "") {
                return false; //Stop the each loop 
            }

        });



        if (alertValidation != "") {
            return false;
        }
    });



    if (alertValidation != "") {
        alert(_msg + alertValidation);
        return false;
    }

    return true;
} 

Answer 1

这似乎有效：http://jsfiddle.net/7sARw/20/

您似乎没有附加点击处理程序来调用validation()。我在你的$(document).ready 函数中添加了这段代码：

$('#QandA').submit(function (evt) {
   return validation();
});

这就是说，如果validation() 返回true，则提交表单，否则不提交。现在，如果您添加一个问题，将 Number of Answers 字段更改为 2，然后提交，就会显示警报。

Answer 2

类型不匹配错误：

<table id="optionAndAnswer" class="optionAndAnswer">

$("tr.optionAndAnswer").each(function() {

<table> id 是 optionAndAnswer，class 也是 optionAndAnswer，好吧不是错误，但是你的 jQuery 选择器选择了 <tr> 和 class optionAndAnswer，而这个HTML 中不存在一个