CODEWITHSUNDEEP
javascriptregexvalidation
codeandcloud
codeandcloud

Reputation: 55210

How to Validate special characters in a textbox and show entered special characters in the error message?

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

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

Upvotes: 0

Views: 12417

Answers (2)

Matyas
Matyas

Reputation: 13702

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

Upvotes: 3

Gumbo
Gumbo

Reputation: 655239

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 commas and combined 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().

Upvotes: 4

Related Questions