Question

In this jsfiddle, please follow the steps below:

1: When you open fiddle click on the “Add Question” button twice, this will add 2 rows underneath.

2: Click on the “Submit details” button and it will come up with this error:

You have errors on Question Number: 2

You have not entered a valid Question

Please Enter in the Number of Answers you Require for this question

Please enter in a figure for Number of Marks for this Question

You have not entered a valid Question

Please Enter in the Number of Answers you Require for this question

Please enter in a figure for Number of Marks for this Question

This is incorrect, the alert above displays all of the errors and the incorrect question number. What should happen is that if there are errors in multiple rows, then it should display the number of the first row which contains errors and display those errors in the alert. The alert should display this:

You have errors on Question Number: 1

You have not entered a valid Question

Please Enter in the Number of Answers you Require for this question

Please enter in a figure for Number of Marks for this Question

Also another problem is that if in the second row you fill in the textarea and textboxes, it displays this alert below:

You have errors on Question Number: 2

You have not entered a valid Question

Please Enter in the Number of Answers you Require for this question

Please enter in a figure for Number of Marks for this Question

The above alert is incorrect as it is stating the wrong question number where the errors are. The question number should be number 1, not number 2. So how can this be fixed as well.

Below is the code of the validation() function where the alerts are controlled:

function validation() {

    var _qid = "";
    var _msg = "";

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

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



            if (!this.value || this.value.length < 5) {
                alertValidation += "\nYou have not entered a valid Question\n";
            }

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

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


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

            if (!this.value) {
                alertValidation += "\nPlease Enter in the Number of Answers you Require for this question\n";
            }

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

        });

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


            if (!this.value) {
                alertValidation += "\nPlease enter in a figure for Number of Marks for this Question\n";
            }

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

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

    return true;
}

Answer 1

You have to check if any error is already found in the outer loop ($("tr.optionAndAnswer").each()) and stop it by returning false.

Add this in the outer each loop and declare alertValidation as var alertValidation otherwise it will be in the global scope.

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

I have fixed it in your fiddle demo take a look.

http://jsfiddle.net/ShankarSangoli/euL5e/1/