Question

I have a problem with my application which is here. Please follow steps below:

1. When you open the application, click on “Open Grid” and select option 4. Buttons A, B, C and D will appear below.

2. In the Number of Answers textbox, type in the number 1. Then click on 1 button out of A, B, C or D (The button selected will turn green). When you have done that then click on the “Add Question” button twice.

3. As you can see the details you have entered on top will be dispayed in 2 new rows underneath. In the first new row you have added, in the textbox under the “Number of Answers” column, change the number 1 to 0 and in the second row change the number of Answers textbox from 1 to 2. Now click on the “Submit Details” button below.

An alert should appear which states “you have selected less answers than the required amount”. and it also states “you have selected more answers than the required amount”. This is correct as in the first row, there is one answer selected but in the textbox it states you want 0 number of answers, and in second row there is one answer selected but in textbox it states you wanted 2 answers.

My Question:

What my question is though that except showing both messages in an alert on both rows, what I want is that it will show an alert showing errors in the first row first. After the user has sorted the error in the first row, then if there is an error in second row then when the user clicks on the “Submit Details” button again, then show an alert displaying message of error in second row.

I want the alert to be displayed like this for first row for example:

Please fix error in question 1:
“you have selected less answers than the required amount”.

For the alert for the second row I want this:

Please fix error in question 2:
“you have selected more answers than the required amount”.

Below is the relevant validation code (I believe the problem is the var context as I think the variable is wrong but I am not sure):

  function validation() {

        alertValidation= "";
            // Note, this is just so it's declared...

            $(".numberAnswerTxtRow").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";
            }
        else if (currenttotal > $(this).val()){
            alertValidation += "\nYou have selected more answers than the required amount\n";
        }

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


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

Hopefully this makes sense, if it doesn’t then please comment to me.

Below is an edit to the validation() function with textarea validation:

 function validation() {

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

   alertValidation= ""; 

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

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

    });

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

    alertValidation= ""; 

    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"; 
    } 
    else if (currenttotal > $(this).val()){ 
        alertValidation += "\nYou have selected more answers than the required amount\n"; 
    } 

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

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

     return true;
}

Answer 1

You should stop the each loop by returning false once if any error condition is valid. Try this.

  function validation() {

        var alertValidation = "";
        // Note, this is just so it's declared...

        $(".numberAnswerTxtRow").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";
            }
            else if (currenttotal > $(this).val()){
                 alertValidation += "\nYou have selected more answers than the required amount\n";
            }

            else if (currenttotal < $(this).val()) {
                 alertValidation += "\nYou have selected less answers than the required amount\n";
            }
            if(alertValidation != ""){
                return false;//Stop the each loop
            }
        });


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