There is a textbox and a button that validates the entry inside the textbox.
That if it should not validate the presence of illegal characters in the form.
Suppose I entered the following word "Lorem# %ipsum^"

On clicking the button, two things should happen

• If there sre any special chars like #$%^&, then the form submission should fail.
• An error message should pop up like "You have used the illegal characters #, % and ^ in your form"

What is the best method?
P.S: I would like a solution not involving jquery.

There is a textbox and a button that validates the entry inside the textbox.
That if it should not validate the presence of illegal characters in the form.
Suppose I entered the following word "Lorem# %ipsum^"

On clicking the button, two things should happen

• If there sre any special chars like #$%^&, then the form submission should fail.
• An error message should pop up like "You have used the illegal characters #, % and ^ in your form"

What is the best method?
P.S: I would like a solution not involving jquery.

• javascript
• regex
• validation

• 1 Is that really the requirement? Wouldn't it be more sensible to have a message such as 'only letters, digits, underscore and hyphen are allowed'? – karim79 Commented Aug 24, 2010 at 6:46

2 Answers 2

You could do this:

var invalidChars = str.match(/[^\w ]/g), output = '';
if (invalidChars) {
    invalidChars = invalidChars.unique();
    var lastInvalidChar = invalidChars.pop();
    output = 'You have used the illegal character' + (invalidChars.length > 0 ? 's' : '') + ' ' +
        invalidChars.join(', ') + (invalidChars.length > 0 ? ' and ' : '') + lastInvalidChar;
}

Here match and the regular expression /[^\w ]/g is used to get all characters that are neither word characters nor a space. The array of matched invalid characters is then cleaned from duplicates using the custom unique method (see below). Then the last invalid character is removed from the array to append it if necessary with an “and” at the end of the output. The remaining invalid characters (if there are any) are then joined with mas and bined with the last invalid character.

Since JavaScript has no built-in unique method to remove duplicates, you can use this method:

Array.prototype.unique = function() {
    var index = {};
    for (var i=0; i<this.length; ++i) {
        if (!index.hasOwnProperty(this[i])) {
            index[this[i]] = this[i];
        }
    }
    var clean = [];
    for (var prop in index) {
        if (index.hasOwnProperty(prop)) {
            clean.push(index[prop]);
        }
    }
    return clean;
};

Note that this implementation is not type-safe as the values are used as property names and thus turned into strings. So ["3",3].unique() returns ["3"] hence "3".toString() === (3).toString().

var myString = document.getElementById("myInputField").value; // gets the sentence
var invalidChars = myString.replace(/[^#%\^]*/g, ""); //gets the chars | "#%^" in your case
var response = "";

for(var  i = 0; i < invalidChars.length; i+){
  response += (i > 0? (i == invalidChars-1 ? " and ": ", "):"") + invalidChars[i];
}

if (response != "") {
  alert("Your data contains invalid characters " + response);
}

For more info on js regexes check out

http://www.regular-expressions.info/javascript.html