jquery 验证不适用于相关 html

Question

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

上面是我的应用程序的jsfiddle。我很抱歉 fiddle 中有很多代码，但需要这些代码才能使应用程序正常工作，而且我确实尝试过大幅削减代码。

但是请按照以下步骤使用jsfiddle:

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

2. 如果您单击“添加问题”按钮，则会出现一条警告，提示您选择的答案少于所需数量。这是事实，因为文本输入表明您需要 1 个答案，但您尚未选择答案。因此，选择“True”或“False”，然后单击“添加问题”按钮。

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，则提交表单，否则不提交。现在，如果您添加问题，请将“答案数”字段更改为 2，然后提交，则会显示警报。