How to find all instances and display in alert

Question

I have a textbox which users will type or paste comma separated values such as A123456,B123456,C123456,D123456

These entries need to meet certain criteria, one of which is that they must be seven (7) characters in length...no more, no less.

If they enter a value that is more than seven characters, I need to display an alert telling them that they've entered a value with too many characters.

Problem is, there can be thousands of these entries and an alert that simply says that somewhere out of the thousands of entries there are one or more entries over seven characters isn't all that helpful.

I've partially solved this with the following code:

val = document.getElementById("Textbox1").value;
val = val.split(',');
for(var i=0;i<val.length;i++){
    if((val[i].length !=7) && (val[i].length !=0)){
        alert("All entries must be seven (7) characters in lenght.  Please correct the following entries:\n" + val[i]);
        return false;
    }
}
return true; 
}

The problem is, I can only return one incorrect entry at a time. So the user has to correct one, run the validation again to see if there is another one, and repeat the process until they find them all.

I'd like to figure out a way to display all the incorrect entries in the alert. Any help is much appreciated.

Answer 1

What about using filter, like this:

var val = document.getElementById("Textbox1").value,
    err = $(val.split(',')).filter(function(){ return this.length != 7; }).toArray();
if (err.length) {
    alert("All entries must be seven (7) characters in length.  Please correct the following entries: \n" + err);
    return false; 
}
return true; 

Demonstration

Or grep, like this:

var val = document.getElementById("Textbox1").value,
    err = $.grep(val.split(','), function(a) { return a.length != 7; });
if (err.length) {
    alert("All entries must be seven (7) characters in length.  Please correct the following entries: \n" + err);
    return false; 
}
return true; 

Demonstration

Answer 2

On can do this :
-On change event, you check every values but the last one (which is not finished yet). If a comma is typed and the last one is not correct, do not allow the user to keep typing and remove the comma (or it will be endless loop).

You have solved the looking-for-the-error problem.

You can also search for some kind of setCursorPosition ..

Answer 3

Don't use alert(). Make a <div> like this and append all messages to it, this way the use gets all messages at once. And it's a nicer way to display errors also.

HTML:

<div id="alerts"></div>

JS:

var errors=""; //put HTML for error messages here
$("#alerts").append(errors);

Answer 4

You can do it easily, by storing all bad entries into a variable and then getting all alert a message with all entries.

Like this one:

val = document.getElementById("Textbox1").value;
val = val.split(',');
    var is_Error = false;
    var ErrrMsg = "All entries must be seven (7) characters in lenght.  Please correct the following entries:\n";
    for(var i=0;i<val.length;i++){    
       if((val[i].length !=7) && (val[i].length !=0)){
          ErrrMsg += val[i] +  ",";
          is_Error = true;
       }    
    }
    if(is_Error == true){
      alert(ErrrMsg.substring(0,(ErrrMsg.length - 1)));/*Here "substring" is used to remove last comma into message string.*/
      return false;
    }
    return true;

Try in fiddle