3

I'd like to have the phone number field on this website only accept numbers or digits. I do not have access to edit the HTML code, so can this be done with jQuery by targeting the field's ID? If so, how can it be done?

I've already tried a few suggestions on this site and none have worked so far.

Thanks in advance for any assistance!

5 Answers 5

24

Similar to Jeroen's solution, here's one that is a little cleaner because rather than replacing the invalid input, it completely prevents it.

$('#nbr').on('keypress', function(ev) {
    var keyCode = window.event ? ev.keyCode : ev.which;
    //codes for 0-9
    if (keyCode < 48 || keyCode > 57) {
        //codes for backspace, delete, enter
        if (keyCode != 0 && keyCode != 8 && keyCode != 13 && !ev.ctrlKey) {
            ev.preventDefault();
        }
    }
});

http://jsfiddle.net/PUQGQ/

2
13

Use jQuery to hook into the textfield's keypress event. In the handler, read the textfield's value and filter out everything that you don't want using a regex replace.

Update: untested example to illustrate:

jQuery("#myPhonefield").keypress(function(){
    var value = jQuery(this).val();
    value = value.replace(/[^0-9]+/g, '');
    jQuery(this).val(value);
});
2
  • 6
    The issue with this solution is that it still allows the user to type the disallowed character even though it removes it. The result is rather odd from the user's perspective because they see the character they typed appear and then immediately disappear. It's better to prevent the input entirely. See my answer below. Nov 15, 2013 at 13:54
  • With thanks to @jeroen, I wrote another with min and max range. You could see in: stackoverflow.com/questions/2013229/…
    – QMaster
    Sep 7, 2014 at 13:33
5

You can use jquery's keypress as recommended by Jeroen; however, I would recommend doing it without using a regex. Something along these lines should work for you:

$('#test').on('keypress', function(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    return !(charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57));
});

Live DEMO

To handle pasting, you can perform a regular expression check on blur or focusout:

$('#test').on('focusout', function() {
    var value = $(this).val();

    $(this).val(value.replace(/[^0-9]/g, ''));
});

Live Demo

4
  • 1
    doesnt handle copy+past scenario Oct 1, 2013 at 10:21
  • I tried using all tricks but Its not working.Your help and kindness would be highly appreciated. Please Help Oct 1, 2013 at 12:57
  • doesnt handle the user inputting 40 and then deleting the 4 Oct 21, 2014 at 10:11
  • @Nenotlep The op of this question was using this for phone numbers, and he would therefore be performing a regex to validate any user input later to confirm it could be valid number. However, if you do not want to allow just a zero in your scenario, you could easily add something in the focusout.
    – Josh Mein
    Oct 21, 2014 at 13:02
2

http://jsfiddle.net/charlescarver/hTMdF/

$("input[type=submit]").click(function() {
    var regex = /\d/g;
    var text = $("input[type=text]").val();
    if (regex(text)) {
        alert("yes");
    }
});​

This will alert you if a number is found.

1
  • 1
    I like doing the regex check on the click of the submit button versus on the keystroke for two reasons: (1) it's a better user experience because they won't think their keyboard is broken (as in Jeroen's fix), and (2) you can enforce a broader regex on the whole input rather than on each keystroke (that means you can enforce a ten digit number with the appropriate hyphens and parentheses!)
    – Nick G.
    Sep 5, 2012 at 22:30
2

Here is my solution (It also validates data/values copy&pasted):

function InputValidator(input, validationType, validChars) {
if (input === null || input.nodeType !== 1 || input.type !== 'text' && input.type !== 'number')
    throw ('Please specify a valid input');

if (!(InputValidator.ValidationType.hasOwnProperty(validationType) || validationType))
    throw 'Please specify a valid Validation type';

input.InputValidator = this;

input.InputValidator.ValidCodes = [];

input.InputValidator.ValidCodes.Add = function (item) {
    this[this.length] = item;
};

input.InputValidator.ValidCodes.hasValue = function (value, target) {
    var i;
    for (i = 0; i < this.length; i++) {
        if (typeof (target) === 'undefined') {
            if (this[i] === value)
                return true;
        }
        else {
            if (this[i][target] === value)
                return true;
        }
    }

    return false;
};

var commandKeys = {
    'backspace': 8,
    'tab': 9,
    'enter': 13,
    'shift': 16,
    'ctrl': 17,
    'alt': 18,
    'pause/break': 19,
    'caps lock': 20,
    'escape': 27,
    'page up': 33,
    'page down': 34,
    'end': 35,
    'home': 36,
    'left arrow': 37,
    'up arrow': 38,
    'right arrow': 39,
    'down arrow': 40,
    'insert': 45,
    'delete': 46,
    'left window key': 91,
    'right window key': 92,
    'select key': 93,
    /*creates Confusion in IE */
    //'f1': 112,
    //'f2': 113,
    //'f3': 114,
    //'f4': 115,
    //'f5': 116,
    //'f6': 117,
    //'f7': 118,
    //'f8': 119,
    //'f9': 120,
    //'f10': 121,
    //'f11': 122,
    //'f12': 123,
    'num lock': 144,
    'scroll lock': 145,
};

commandKeys.hasValue = function (value) {
    for (var a in this) {
        if (this[a] === value)
            return true;
    }

    return false;
};

function getCharCodes(arrTarget, chars) {
    for (var i = 0; i < chars.length; i++) {
        arrTarget.Add(chars[i].charCodeAt(0));
    }
}

function triggerEvent(name, element) {
    if (document.createEventObject) {
        // dispatch for IE
        var evt = document.createEventObject();
        return element.fireEvent('on' + name, evt)
    }
    else {
        // dispatch for firefox + others
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(name, true, true); // event type,bubbling,cancelable
        return !element.dispatchEvent(evt);
    }
}

if (validationType == InputValidator.ValidationType.Custom) {
    if (typeof (validChars) === 'undefined')
        throw 'Please add valid characters';

    getCharCodes(input.InputValidator.ValidCodes, validChars);
}
else if (validationType == InputValidator.ValidationType.Decimal) {
    getCharCodes(input.InputValidator.ValidCodes, '0123456789.');
}
else if (validationType == InputValidator.ValidationType.Numeric) {
    getCharCodes(input.InputValidator.ValidCodes, '0123456789');
}

input.InputValidator.ValidateChar = function (c) {
    return this.ValidCodes.hasValue(c.charCodeAt(0));
}

input.InputValidator.ValidateString = function (s) {
    var arr = s.split('');

    for (var i = 0; i < arr.length; i++) {
        if (!this.ValidateChar(arr[i])) {
            arr[i] = '';
        }
    }

    return arr.join('');
}

function bindEvent(el, eventName, eventHandler) {
    if (el.addEventListener) {
        el.addEventListener(eventName, eventHandler, false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + eventName, eventHandler);
    }
}

function getCaretPosition(i) {
    if (!i) return;

    if ('selectionStart' in i) {
        return i.selectionStart;
    }
    else {
        if (document.selection) {
            var sel = document.selection.createRange();
            var selLen = document.selection.createRange().text.length;
            sel.moveStart('character', -i.value.length);
            return sel.text.length - selLen;
        }
    }
}

function setCursor(node, pos) {
    var node = (typeof (node) === "string" || node instanceof String) ? document.getElementById(node) : node;

    if (!node) {
        return false;
    }
    else if (node.createTextRange) {
        var textRange = node.createTextRange();
        textRange.collapse(true);
        textRange.moveEnd(pos);
        textRange.moveStart(pos);
        textRange.select();
        return true;
    } else if (node.setSelectionRange) {
        node.setSelectionRange(pos, pos);
        return true;
    }

    return false;
}

function validateActive() {
    if (input.isActive) {
        var pos = getCaretPosition(input);

        var arr = input.value.split('');

        for (var i = 0; i < arr.length; i++) {
            if (!this.ValidateChar(arr[i])) {
                arr[i] = '';

                if (pos > i)
                    pos--;
            }
        }
        console.log('before : ' + input.value);

        input.value = arr.join('');
        console.log('after : ' + input.value, input);
        setCursor(input, pos);

        setTimeout(validateActive, 10);
    }
}

bindEvent(input, 'keypress', function (e) {
    var evt = e || window.event;
    var charCode = evt.which || evt.keyCode;

    if (!input.InputValidator.ValidCodes.hasValue(charCode) && !commandKeys.hasValue(charCode)) {
        if (evt.preventDefault) {
            evt.preventDefault();
            evt.stopPropagation();
        }
        return false;
    }
});

bindEvent(input, 'keyup', function (e) {
    var evt = e || window.event;
    var charCode = evt.which || evt.keyCode;

    if (!input.InputValidator.ValidCodes.hasValue(charCode) && !commandKeys.hasValue(charCode)) {
        if (evt.preventDefault) {
            evt.preventDefault();
            evt.stopPropagation();
        }
        return false;
    }
});

bindEvent(input, 'change', function (e) {
    var dt = input.value;

    input.value = input.InputValidator.ValidateString(input.value);

    if (input.value !== dt)
        triggerEvent('change', input);
});

bindEvent(input, 'blur', function (e) {
    var dt = input.value;
    input.value = input.InputValidator.ValidateString(input.value);

    input.isActive = false;

    if (input.value !== dt)
        triggerEvent('blur', input);
});

bindEvent(input, 'paste', function (e) {
    var evt = e || window.event;
    var svt = input.value;

    if (evt && evt.clipboardData && evt.clipboardData.getData) {// Webkit - get data from clipboard, put into editdiv, cleanup, then cancel event
        if (/text\/html/.test(evt.clipboardData.types)) {
            var dt = evt.clipboardData.getData('text/html');

            input.value = input.InputValidator.ValidateString(dt);
            if (input.value !== dt)
                triggerEvent('change', input);
        }
        else if (/text\/plain/.test(e.clipboardData.types)) {
            var dt = evt.clipboardData.getData('text/plain');

            input.value = input.InputValidator.ValidateString(dt);
            if (input.value !== dt)
                triggerEvent('change', input);
        }
        else {
            input.value = '';
        }
        waitforpastedata(input, svt);
        if (e.preventDefault) {
            e.stopPropagation();
            e.preventDefault();
        }
        return false;
    }
    else {// Everything else - empty editdiv and allow browser to paste content into it, then cleanup
        input.value = '';
        waitforpastedata(input, svt);
        return true;
    }
});

bindEvent(input, 'select', function (e) {
    var evt = e || window.event;

    if (evt.preventDefault) {
        evt.preventDefault();
        evt.stopPropagation();
    }
    return false;
});

bindEvent(input, 'selectstart', function (e) {
    var evt = e || window.event;

    if (evt.preventDefault) {
        evt.preventDefault();
        evt.stopPropagation();
    }
    return false;
});

/* no need to validate wile active,
   removing F keys fixed IE compatability*/
//bindEvent(input, 'fucus', function (e) {
//    input.isActive = true;
//    validateActive();
//});

//validate current value of the textbox
{
    var dt = input.value;
    input.value = input.InputValidator.ValidateString(input.value);

    //trigger event to indicate value has changed
    if (input.value !== dt)
        triggerEvent('change', input);
}

function waitforpastedata(elem, savedcontent) {
    if (elem.value !== '') {
        var dt = input.value;
        elem.value = elem.InputValidator.ValidateString(elem.value);

        if (input.value !== dt)
            triggerEvent('change', input);
    }
    else {
        var that = {
            e: elem,
            s: savedcontent
        }
        that.callself = function () {
            waitforpastedata(that.e, that.s)
        }
        setTimeout(that.callself, 10);
    }
}
}

InputValidator.ValidationType = new (function (types) {
    for (var i = 0; i < types.length; i++) {
        this[types[i]] = types[i];
    }
})(['Numeric', 'Custom', 'Decimal']);

To apply it to an input, do the following :

new InputValidator(document.getElementById('txtValidate'), InputValidator.ValidationType.Decimal);/* Numeric or Custom */

If you specify Custom as the validation type you have to specify the valid characters. eg :

new InputValidator(document.getElementById('txtValidate'), InputValidator.ValidationType.Custom,'1234abc');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.