Validate text area for input numeric, comma, dot and space not allowed

Question

I have placed one text box and I want to put restriction on it .

Only number,comma,dot can be allowed to input in text area and space not be allowed.

Answer 1

You might face this problem in a lot of different ways. Most people would propably just strip the users input after he had finished typing. But heres my attept I did a few years ago (uses prototype.js, but should be easily rewritten):

Element.prototype.watchInput = function(data){
    if(Object.isString(data))
        data = {allow:data};

    var data = Object.extend({
        letters: true,
        numbers: true,
        allow: '_'
     }, data || { });

     $(this).observe('keypress', function(e){
        setTimeout(function(){
            var elem = $(Event.element(e));
            var value = elem.getValue();
            var input = value.substr(value.length-1).toLowerCase(); // last character
            var replace = '';

            var remove = true;
            if(data.letters && 'abcdefghijklmnopqrstuvwxyz'.include(input)) remove = false;
            if(data.numbers && '01234567890'.include(input)) remove = false;
            if(data.allow && data.allow.include(input)) remove = false;

            if(remove){
                elem.setValue(value.gsub(input, replace));
            }
        }, 3);
    });
    return this;
}

Use this by simply applying it to your input/textarea:

$('myInput').watchInput({letters:false,allow:',.'});

The element will be observed on any keypress. Since the keypress event does not receive the clients input directly, we have to wait a bit (in my case 3 millisec). After that, we validate the last charakter of the clients input and remove it in case it is invalid.

I know, this isn't the most beautiful code, but I think the idea is worth spreading.

---

Here is a preview of the setup above.