2

I want to concatenate messages in my alert so that it show all error messages for the first question it encounters errors on. For example if I have 3 questions and there are errors in question 1 and question 3, when I click on the submit button, the validation alert should display an example alert like so:

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

It is only after I have solved errors in question 1 that when I submit the page again then it shows the alert for question number 3 as an example below:

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

The problem I am having is that it is only showing 1 question number at a time which is fine but it is showing all of the errors from question 1 and 3 so it looks like this below:

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

My question is then how can I get the alert working so it matches the way I want it to work?

Below is the jquery code:

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;
}

In the above code where it says //comment, if I include this code:

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

Then what it does is that it displays only one message per alert per question e.g

except alerting:

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

It will just alert:

You have errors on Question Number: 1

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

   UPDATE:

Below is an update of the code:

function validation() {

    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;
}

But the problem is that below is what it alerts:

• 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

4

2 回答 2

2

You're resetting the _msg in every .each() iteration. If you just add the _msg portion of the message to alertValidation on a question by question basis, it should be ok.

Not sure if this code will work as I don't have a test page. 

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;
}

Edit: Fixed a bug with the parseInt(...) statement.

Updated jsFiddle

于 2012-12-18T08:54:54.860 回答
0

Your problem is this line:

_msg = "You have errors on Question Number: " + _qid + "\n";

That will overwrite any existing text. So what you need to do is write all text into a single variable (instead of _msg and alertValidation) and always append:

alertValidation += "\nYou have errors on Question Number: " + _qid + "\n";

and then

alert(alertValidation.substr(1));
于 2012-12-18T08:57:03.660 回答