CODEWITHSUNDEEP
javascriptasp.net
demouser
demouser

Reputation: 113

Decimal validation using javascript not working as expected

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

Upvotes: 1

Views: 228

Answers (1)

Bibek Gautam
Bibek Gautam

Reputation: 592

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);
}

Upvotes: 1

Related Questions