Decimal validation using javascript not working as expected

Question

Hi all I have written a script to allow only decimal in textbox

function onlyDecimal(evt) {
        if (!(evt.keyCode == 46 || (evt.keyCode >= 48 && evt.keyCode <= 57)))
            return false;
        var parts = evt.srcElement.value.split('.');
        if (parts.length > 2)
            return false;
        if (evt.keyCode == 46)
            return (parts.length == 1);
        if (parts[0].length >= 15)
            return false;
        if (parts[1].length >= 3)
            return false;
    }

<asp:TextBox ID="txtDecimal" runat="server" OnKeyPress="return onlyDecimal(event)" />

This is only allowing the following inputs

1.000
12.000
123.123

But I would like to restrict the following after decimal only 3 digits before decimal it can accept up to 15 digits so can some one help me like the following 1234.123,12345.123 and so on

Also If I enter 12.123 and trying to edit the decimal part it is not allowing me to edit the value until I clear that value

Rather than trying to catch all permutations as the enter, it would be far easier (and very common) to permit all entry and then validate it when you submit. This becomes a lot easier, and would be much more readable than your event code above. — Paddy
– Paddy, Commented Dec 11, 2013 at 7:58

Bibek Gautam · Accepted Answer · 2013-12-11 07:54:27Z

1

You can add "FilterNumber" class in the textbox and implement jquery to achieve your functionality

<asp:TextBox ID="txtDecimal" CssClass="FilterNumber" runat="server" />

$(".FilterNumber").live("keypress", function (e) {    
    var caretPosition = doGetCaretPosition(this);
    var code = (code ? code : e.which);
    //if it is delete,navigation keys always allow 
    if (code == 0 || code == 8)
        return true;
    var Value = $(this).val();
    if (Value.indexOf('.') != -1) {
        var splt = Value.split('.');
        var indexofDot = Value.indexOf('.');
        if (caretPosition > indexofDot) {
        //allow only three character after .
            if (splt[1].length > 2) {
                return false;
            }
        }
        else {
            //allow only fifteen character before .
            if (splt[0].length > 14) {
                return false;
            }
        }
    }
    if (code != 46 && code > 31 && (code < 48 || code > 57))
        return false;
    //if it is (.)
    else if (code == 46) {
        var Value = $(this).val();
        //if value already contains (.) character
        if (Value.indexOf('.') != -1) {
            var splt = Value.split('.');
            //if there is already(.) char then return false
            if (splt.length >= 2)
                return false;
        }
    }
    return true;
});

You need the caret position on the textbox so that you can know whether the use is entering the numbers before . or after .

function doGetCaretPosition(oField) {
    // Initialize
    var iCaretPos = 0;
    // IE Support
    if (document.selection) {
        // Set focus on the element
        oField.focus();
        // To get cursor position, get empty selection range
        var oSel = document.selection.createRange();
        // Move selection start to 0 position
        oSel.moveStart('character', -oField.value.length);
        // The caret position is selection length
        iCaretPos = oSel.text.length;
    }
    // Firefox support
    else if (oField.selectionStart || oField.selectionStart == '0')
        iCaretPos = oField.selectionStart;
    // Return results
    return (iCaretPos);
}

answered Dec 11, 2013 at 7:54

Bibek Gautam

5929 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

demouser Over a year ago

What is the jquery plugin you used for this?

Bibek Gautam Over a year ago

@demouser i have just used Jquery for this solution,did you test this solution ?

demouser Over a year ago

Can you give me the jquery link JsFiddle that you have tested

Collectives™ on Stack Overflow

Decimal validation using javascript not working as expected

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related