jquery - 如何在警报中正确串联消息

Question

我想连接警报中的消息，以便它显示遇到错误的第一个问题的所有错误消息。例如，如果我有 3 个问题，并且问题 1 和问题 3 有错误，当我单击提交按钮时，验证警报应显示如下示例警报:

You have errors on Question Number: 1

• You have not entered in a value in all the Indivdiaul Marks textbox

• You have not entered in a value in all the Indivdiaul Marks textbox Your Total Marks Remaining does not equal 0

只有在我解决了问题 1 中的错误后，当我再次提交页面时，它才会显示问题 3 的警报，如下所示:

You have errors on Question Number: 3

• You have not entered in a value in all the Indivdiaul Marks textbox

• You have not entered in a value in all the Indivdiaul Marks textbox Your Total Marks Remaining does not equal 0

我遇到的问题是它一次只显示 1 个问题编号，这很好，但它显示了问题 1 和 3 中的所有错误，因此如下所示:

You have errors on Question Number: 1

• You have not entered in a value in all the Indivdiaul Marks textbox

• You have not entered in a value in all the Indivdiaul Marks textbox Your Total Marks Remaining does not equal 0

• You have not entered in a value in all the Indivdiaul Marks textbox

• You have not entered in a value in all the Indivdiaul Marks textbox Your Total Marks Remaining does not equal 0

我的问题是如何让警报正常工作，使其符合我想要的工作方式？

下面是 jquery 代码:

function validation() {
    var alertValidation = "";
    var _qid = "";
    var _msg = "";

    $("input[data-type='qmark']").each(function(i) {  
        var questions = $(this).attr("data-qnum");
        var marks = parseInt($("[class*=q" + i + "_ans_text]").text()); 
        var txtinput = $(this).val(); 
        _qid = questions;
        _msg = "You have errors on Question Number: " + _qid + "\n";

        if (txtinput == '') {
            alertValidation += "\n\u2022 You have not entered in a value in all the Indivdiaul Marks textbox\n";
        }

        if(marks < '0') {
            alertValidation += "Your Total Marks Remaining does not equal 0 \n\n\u2022 You Need To Remove " + Math.abs(marks) +  " Marks";   
        }

        if(marks > '0') {
            alertValidation += "Your Total Marks Remaining does not equal 0 \n\n\u2022 You Have " + marks +  " Marks Remaining";   
        }
    });

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

在上面的代码中，它显示//comment，如果我包含此代码:

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

然后它的作用是每个问题的每个警报仅显示一条消息，例如

除了警报:

You have errors on Question Number: 1

• You have not entered in a value in all the Indivdiaul Marks textbox

• You have not entered in a value in all the Indivdiaul Marks textbox Your Total Marks Remaining does not equal 0

它只会提醒:

You have errors on Question Number: 1

• You have not entered in a value in all the Indivdiaul Marks textbox

   UPDATE:

以下是代码的更新:

函数验证() {

    var alertValidation = "";
    var _qid = "";

    $("input[data-type='qmark']").each(function(i) {  
    var questions = $(this).attr("data-qnum");
    var marks = parseInt($("[class*=q" + i + "_ans_text]").text()); 
    var txtinput = $(this).val(); 
    _qid = questions;
    alertValidation += "\nYou have errors on Question Number: " + _qid + "\n";


if (txtinput == '') {
    alertValidation += "\n\u2022 You have not entered in a value in all the Indivdiaul Marks textbox\n";
}    


if(marks < '0')
{

 alertValidation += "Your Total Marks Remaining does not equal 0 \n\n\u2022 You Need To Remove " + Math.abs(marks) +  " Marks";   
}

if(marks > '0')
{

 alertValidation += "Your Total Marks Remaining does not equal 0 \n\n\u2022 You Have " + marks +  " Marks Remaining";   
}



        });


    if (alertValidation != "") {
       alert(alertValidation.substr(1));
        return false;
    }

    return true;
}

但问题是它发出的警报如下:

• You have errors on Question Number: 1

• You have not entered in a value in all the Indivdiaul Marks textbox You have errors on Question Number: 1

• You have not entered in a value in all the Indivdiaul Marks textbox Your Total Marks Remaining does not equal 0

• You Have 5 Marks RemainingYou have errors on Question Number: 2

• You have errors on Question Number: 3

• You have not entered in a value in all the Indivdiaul Marks textbox Your Total Marks Remaining does not equal 0

• You Have 5 Marks RemainingYou have errors on Question Number: 3

• You have not entered in a value in all the Indivdiaul Marks textbox You have errors on Question Number: 3

• You have not entered in a value in all the Indivdiaul Marks textbox

Answer 1

您将在每次 .each() 迭代中重置 _msg。如果您只是逐个问题地将消息的 _msg 部分添加到 alertValidation 中，应该没问题。

不确定此代码是否有效，因为我没有测试页。

function validation() {

    // only keeping track of the final message
    var alertValidation = "",
        // toggle for showing only one error
        showOnlyOneError = true;

    $("input[data-type='qmark']").each(function(i) {  
        var questions = $(this).attr("data-qnum");
        var marks = parseInt($("[class*=q" + (i+1) + "_ans_text]").text(), 10); 
        var txtinput = $(this).val(); 

        // the message for this question
        var msg = '';

        if (txtinput == '') {
            msg += "\n\u2022 You have not entered in a value in all the Indivdiaul Marks textbox\n";
        }

        if (marks < 0) {
            msg += "Your Total Marks Remaining does not equal 0 \n\n\u2022 You Need To Remove " + Math.abs(marks) +  " Marks";   
        } else if (marks > 0) {
            msg += "Your Total Marks Remaining does not equal 0 \n\n\u2022 You Have " + marks +  " Marks Remaining";   
        }

        // if there is an error for the question, add it to the main message
        if (msg.length) {
            alertValidation += alertValidation.length ? '\n\n' : '';
            alertValidation += "You have errors on Question Number: " + questions + "\n";
            alertValidation += msg;
            // stop if we only care about the first error
            return !showOnlyOneError;
        }
    });

    // show the error messages
    if (alertValidation != "") {
        alert(alertValidation);
        return false;
    }

    return true;
}

编辑:修复了 parseInt(...) 语句的错误。

已更新jsFiddle