Allow only numbers and dot in script

Asked 21/3, 2012 at 6:16 Answered 5/6, 2024 at 6:27

Solved javascript asp.net regex validation

Am using this javascript for restrict users to type only numbers and only one dot as decimal separator.

<script type="text/javascript">
 function fun_AllowOnlyAmountAndDot(txt)
        {
            if(event.keyCode > 47 && event.keyCode < 58 || event.keyCode == 46)
            {
               var txtbx=document.getElementById(txt);
               var amount = document.getElementById(txt).value;
               var present=0;
               var count=0;

               if(amount.indexOf(".",present)||amount.indexOf(".",present+1));
               {
              // alert('0');
               }

              /*if(amount.length==2)
              {
                if(event.keyCode != 46)
                return false;
              }*/
               do
               {
               present=amount.indexOf(".",present);
               if(present!=-1)
                {
                 count++;
                 present++;
                 }
               }
               while(present!=-1);
               if(present==-1 && amount.length==0 && event.keyCode == 46)
               {
                    event.keyCode=0;
                    //alert("Wrong position of decimal point not  allowed !!");
                    return false;
               }

               if(count>=1 && event.keyCode == 46)
               {

                    event.keyCode=0;
                    //alert("Only one decimal point is allowed !!");
                    return false;
               }
               if(count==1)
               {
                var lastdigits=amount.substring(amount.indexOf(".")+1,amount.length);
                if(lastdigits.length>=2)
                            {
                              //alert("Two decimal places only allowed");
                              event.keyCode=0;
                              return false;
                              }
               }
                    return true;
            }
            else
            {
                    event.keyCode=0;
                    //alert("Only Numbers with dot allowed !!");
                    return false;
            }

        }

    </script>

<td align="right">
<asp:TextBox ID="txtQ1gTarget" runat="server" Width="30px" CssClass="txtbx" MaxLength="6" onkeypress="return fun_AllowOnlyAmountAndDot(this);"></asp:TextBox>
</td>

But the onkeypress(this) event returns object required error in that function at this place

var amount = document.getElementById(txt).value;

What's my mistake here?

Appendicectomy answered 21/3, 2012 at 6:16 Comment(1)

You can try this: onkeypress="return fun_AllowOnlyAmountAndDot(event);" – Otiliaotina 9/8, 2017 at 9:19

Instead of using this:

onkeypress="return fun_AllowOnlyAmountAndDot(this);"

You should use this:

onkeypress="return fun_AllowOnlyAmountAndDot(this.id);"

Unmentionable answered 21/3, 2012 at 7:37 Comment(0)

This is a great place to use regular expressions.

By using a regular expression, you can replace all that code with just one line.

You can use the following regex to validate your requirements:

[0-9]*\.?[0-9]*

In other words: zero or more numeric characters, followed by zero or one period(s), followed by zero or more numeric characters.

You can replace your code with this:

function validate(s) {
    var rgx = /^[0-9]*\.?[0-9]*$/;
    return s.match(rgx);
}

That code can replace your entire function!

Note that you have to escape the period with a backslash (otherwise it stands for 'any character').

For more reading on using regular expressions with javascript, check this out:

http://www.regular-expressions.info/javascript.html

You can also test the above regex here:

http://www.regular-expressions.info/javascriptexample.html

Explanation of the regex used above:

The brackets mean "any character inside these brackets." You can use a hyphen (like above) to indicate a range of chars.
The * means "zero or more of the previous expression."
[0-9]* means "zero or more numbers"
The backslash is used as an escape character for the period, because period usually stands for "any character."
The ? means "zero or one of the previous character."
The ^ represents the beginning of a string.
The $ represents the end of a string.
Starting the regex with ^ and ending it with $ ensures that the entire string adheres to the regex pattern.

Hope this helps!

Neona answered 21/3, 2012 at 6:23 Comment(3)

Is matches() supposed to be match()? – Pecksniffian 29/5, 2015 at 10:21

Not a regex expert, but I had to use /^[0-9-]*\.?[0-9]*$/ in order to match negative numbers. Thanks for your answer. – Wayside 5/11, 2018 at 6:18

If you're looking to not match the dot alone ("."), replace the first asterisk (*) with a plus (+) – Eason 18/11, 2019 at 2:32

Use Jquery instead. Add a decimal class to your textbox:

<input type="text" class="decimal" value="" />

Use this code in your JS. It checks for multiple decimals and also restrict users to type only numbers.

$('.decimal').keyup(function(){
    var val = $(this).val();
    if(isNaN(val)){
         val = val.replace(/[^0-9\.]/g,'');
         if(val.split('.').length>2) 
             val =val.replace(/\.+$/,"");
    }
    $(this).val(val); 
});

Check this fiddle: http://jsfiddle.net/2YW8g/

Hope it helps.

Dugald answered 21/3, 2012 at 6:36 Comment(1)

this doesn't work fine. Allowed multiple decimals. screencast.com/t/s43DpVAhw – Destinee 28/4, 2020 at 13:59

Just add the code below in your input text:

onkeypress='return event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)'

Ali answered 3/3, 2017 at 9:10 Comment(0)

Instead of using this:

onkeypress="return fun_AllowOnlyAmountAndDot(this);"

You should use this:

onkeypress="return fun_AllowOnlyAmountAndDot(this.id);"

Unmentionable answered 21/3, 2012 at 7:37 Comment(0)

function isNumberKey(evt,id)
{
	try{
        var charCode = (evt.which) ? evt.which : event.keyCode;
  
        if(charCode==46){
            var txt=document.getElementById(id).value;
            if(!(txt.indexOf(".") > -1)){
	
                return true;
            }
        }
        if (charCode > 31 && (charCode < 48 || charCode > 57) )
            return false;

        return true;
	}catch(w){
		alert(w);
	}
}

<html>
  <head>
  </head>
  <body>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event,this.id)" type="text" name="txtChar">
  </body>
</html>

Bael answered 22/12, 2015 at 11:36 Comment(0)

<input type="text" class="decimal" value="" />
$('.decimal').keypress(function(evt){
    return (/^[0-9]*\.?[0-9]*$/).test($(this).val()+evt.key);
});

I think this simple solution may be.

Glanders answered 9/9, 2016 at 9:8 Comment(1)

This fails when the input is "123...122", it ignores the dot if put together – Updo 7/2, 2020 at 6:56

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 46 || charCode > 57)) {
        return false;
    }
    return true;
}

you should use this function and write the properties of this element ;

HTML Code:

<input id="deneme" data-mini="true" onKeyPress="return isNumber(event)" type="text"/>`

Crescin answered 11/9, 2013 at 8:25 Comment(0)

This works best for me.

I also apply a currency formatter on blur where the decimal part is rounded at 2 digits just in case after validating with parseFloat.

The functions that get and set the cursor position are from Vishal Monpara's blog. I also do some nice stuff on focus with those functions. You can easily remove 2 blocks of code where 2 decimals are forced if you want and get rid of the set/get caret functions.

<html>
<body>
<input type="text" size="30" maxlength="30" onkeypress="return numericValidation(this,event);" />
<script language="JavaScript">
    function numericValidation(obj,evt) {
        var e = event || evt; // for trans-browser compatibility

        var charCode = e.which || e.keyCode;        

        if (charCode == 46) { //one dot
            if (obj.value.indexOf(".") > -1)
                return false;
            else {
                //---if the dot is positioned in the middle give the user a surprise, remember: just 2 decimals allowed
                var idx = doGetCaretPosition(obj);
                var part1 = obj.value.substr(0,idx),
                    part2 = obj.value.substring(idx);

                if (part2.length > 2) {
                    obj.value = part1 + "." + part2.substr(0,2);
                    setCaretPosition(obj, idx + 1);
                    return false;
                }//---

                //allow one dot if not cheating
                return true;
            }
        }
        else if (charCode > 31 && (charCode < 48 || charCode > 57)) { //just numbers
            return false;
        }

        //---just 2 decimals stubborn!
        var arr = obj.value.split(".") , pos = doGetCaretPosition(obj);

        if (arr.length == 2 && pos > arr[0].length && arr[1].length == 2)                               
            return false;
        //---

        //ok it's a number
        return true;
    }

    function doGetCaretPosition (ctrl) {
        var CaretPos = 0;   // IE Support
        if (document.selection) {
        ctrl.focus ();
            var Sel = document.selection.createRange ();
            Sel.moveStart ('character', -ctrl.value.length);
            CaretPos = Sel.text.length;
        }
        // Firefox support
        else if (ctrl.selectionStart || ctrl.selectionStart == '0')
            CaretPos = ctrl.selectionStart;
        return (CaretPos);
    }

    function setCaretPosition(ctrl, pos){
        if(ctrl.setSelectionRange)
        {
            ctrl.focus();
            ctrl.setSelectionRange(pos,pos);
        }
        else if (ctrl.createTextRange) {
            var range = ctrl.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    }
</script>
</body>
</html>

Professionalize answered 6/9, 2012 at 5:53 Comment(0)

try This Code

var check = function(evt){

var data = document.getElementById('num').value;
if((evt.charCode>= 48 && evt.charCode <= 57) || evt.charCode== 46 ||evt.charCode == 0){
if(data.indexOf('.') > -1){
 if(evt.charCode== 46)
  evt.preventDefault();
}
}else
evt.preventDefault();
};

document.getElementById('num').addEventListener('keypress',check);

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type="text" id="num" value="" />



</body>
</html>

Adaptable answered 8/12, 2016 at 9:24 Comment(0)

<script type="text/javascript">
    function numericValidation(txtvalue) {
        var e = event || evt; // for trans-browser compatibility
        var charCode = e.which || e.keyCode;
        if (!(document.getElementById(txtvalue.id).value))
         {
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }
        else {
               var val = document.getElementById(txtvalue.id).value;
            if(charCode==46 || (charCode > 31 && (charCode > 47 && charCode < 58)) )
             {
                var points = 0;            
                points = val.indexOf(".", points);                    
                if (points >= 1 && charCode == 46)
                {      
                   return false;
                }                 
                if (points == 1) 
                {
                    var lastdigits = val.substring(val.indexOf(".") + 1, val.length);
                    if (lastdigits.length >= 2)
                    {
                        alert("Two decimal places only allowed");
                        return false;
                    }
                }
                return true;
            }
            else {
                alert("Only Numarics allowed");
                return false;
            }
        }
    }

</script>
<form id="form1" runat="server">
<div>
  <asp:TextBox ID="txtHDLLevel" MaxLength="6" runat="server" Width="33px" onkeypress="return numericValidation(this);"  />
</div>
</form>

Gherkin answered 20/6, 2012 at 18:58 Comment(1)

Posting the solution is good, but it might improve your answer if you describe or highlight what the mistake was. – Lunette 20/10, 2012 at 12:34

This function will prevent entry of anything other than numbers and a single dot.

function validateQty(el, evt) {
   var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode != 45 && charCode != 8 && (charCode != 46) && (charCode < 48 || charCode > 57))
        return false;
    if (charCode == 46) {
        if ((el.value) && (el.value.indexOf('.') >= 0))
            return false;
        else
            return true;
    }
    return true;
    var charCode = (evt.which) ? evt.which : event.keyCode;
    var number = evt.value.split('.');
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
};

<input type="text" onkeypress='return validateQty(this,event);'>

Neruda answered 19/11, 2015 at 14:9 Comment(0)

Try this for multiple text fileds (using class selector):

Click here for example..

var checking = function(event){
	var data = this.value;
	if((event.charCode>= 48 && event.charCode <= 57) || event.charCode== 46 ||event.charCode == 0){
		if(data.indexOf('.') > -1){
 			if(event.charCode== 46)
  				event.preventDefault();
		}
	}else
		event.preventDefault();
	};

	function addListener(list){
		for(var i=0;i<list.length;i++){
    		list[i].addEventListener('keypress',checking);
    	}
	}
	var classList = document.getElementsByClassName('number');
	addListener(classList);

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
  <input type="text" class="number" value="" /><br><br>
  <input type="text" class="number" value="" /><br><br>
  <input type="text" class="number" value="" /><br><br>
  <input type="text" class="number" value="" /><br><br>
</body>
</html>

Caftan answered 8/12, 2016 at 10:13 Comment(0)

You can use this

Javascript

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)&&(charCode!=46)) {
        return false;
    }
    return true;
}

Usage

 <input onkeypress="return isNumber(event)" class="form-control">

Surfboarding answered 13/8, 2019 at 12:53 Comment(0)

 <script type="text/Javascript">
        function checkDecimal(inputVal) {
            var ex = /^[0-9]+\.?[0-9]*$/;
            if (ex.test(inputVal.value) == false) {
                inputVal.value = inputVal.value.substring(0, inputVal.value.length - 1);
            }
        }
</script>

Averil answered 24/9, 2019 at 8:28 Comment(0)

In this function there is an error while editing it when I have added 2 digits(I have defined it's limit 2) after decimal point than it returns false, like if we have to change 1486.00 to 1582.00 without clearing the whole input or deleting any number after decimal point it will return false.

There is a small change required, where the condition of count is 1(count === 1) there add a condition event.target.selectionStart > amount.indexOf(".")

The final code will be

const validDecimal = (event) => {

    if ((event.charCode > 47 && event.charCode < 58) || event.charCode === 46) {
        var amount = event.target.value;
        var present = 0;
        var count = 0;

        do {
            present = amount.indexOf(".", present);
            if (present != -1) {
                count++;
                present++;
            }
        } while (present != -1);
        if (present === -1 && amount.length === 0 && event.charCode === 46) {
            event.charCode = 0;
            // alert("Wrong position of decimal point not  allowed !!");
            return false;
        }

        if (count >= 1 && event.charCode === 46) {
            event.charCode = 0;
            // alert("Only one decimal point is allowed !!");
            return false;
        }
        if (count === 1 && event.target.selectionStart > amount.indexOf(".")) {
            var lastdigits = amount.substring(
                amount.indexOf(".") + 1,
                amount.length
            );
            if (lastdigits.length >= 2) {
                // alert("Two decimal places only allowed");
                event.charCode = 0;
                return false;
            }
        }
        return true;
    } else {
        event.charCode = 0;
        // alert("Only Numbers with dot allowed !!");
        return false;
    }
};

Touchandgo answered 1/8, 2022 at 10:3 Comment(0)

Please try below code. this could help you to solve it.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
function fnAllowNumbersAndDotKey(input, event) 
{
    var charCode = (event.which) ? event.which : event.keyCode;
    if (charCode == 46) 
    {
        //only one dot (.) allow
        if (input.value.indexOf('.') === -1)
        {
            return true;
        } 
        else 
        {
            return false;
        }
    } 
    else 
    {
        if (charCode > 31 && (charCode < 48 || charCode > 57))
        {
            return false;
        }
    }
    return true;
}
</script>
</head>
<body>
<form method='post' >
  <input type="text" name='amount' class='form-control' onkeypress="return fnAllowNumbersAndDotKey(this, event);" maxlength="50" />
</form>

</body>
</html>

Luella answered 6/11, 2022 at 11:33 Comment(1)

"Try this" is not an answer. Please explain how this actually would solve the issue – Kennethkennett 5/6, 2024 at 9:57

-1

 <input type="text" class="form-control" id="odometer_reading" name="odometer_reading"  placeholder="Odometer Reading" onblur="odometer_reading1();" onkeypress='validate(event)' required="" />
<script>
                function validate(evt) {
                  var theEvent = evt || window.event;
                  var key = theEvent.keyCode || theEvent.which;
                  key = String.fromCharCode( key );
                  var regex = /[0-9]|\./;
                  if( !regex.test(key) ) {
                    theEvent.returnValue = false;
                    if(theEvent.preventDefault) theEvent.preventDefault();
                  }
                }
            </script>

Goldston answered 19/3, 2016 at 9:46 Comment(0)

-1

<INPUT id="txtChar" type="text" name="txtChar" oninput="this.value = this.value.replace(/(\..*)\./g, '$1');">

this.value refers to the current value of the input field. .replace() is a JavaScript function used to replace text within a string. /(..)./g is a regular expression pattern that matches a decimal point followed by any number of characters (. means zero or more of any character), followed by another decimal point. The parentheses (..*) capture the first decimal point and the subsequent characters. '$1' is a reference to the first captured group within the regular expression, which is everything after the first decimal point. So, it replaces the entire match (the two decimal points and everything in between) with just the first decimal point and whatever comes after it. This effectively ensures that only one decimal point is allowed in the input field.

Nidianidicolous answered 5/6, 2024 at 6:27 Comment(5)

try this in your input field – Nidianidicolous 5/6, 2024 at 6:44

Did you create this answer with ChatGPT? – Kennethkennett 5/6, 2024 at 11:36

no. this is not from chatgpt. – Nidianidicolous 5/6, 2024 at 13:33

The comment above is rethorical. Please read the attached article - TLDR: Using AI to create any content on SO is banned – Kennethkennett 5/6, 2024 at 13:35

FYI: "Your" snippet doesn't even work – Kennethkennett 5/6, 2024 at 13:38

-3

Hope this could help someone

$(document).on("input", ".numeric", function() {
this.value = this.value.match(/^\d+\.?\d{0,2}/);});

Alyss answered 4/8, 2020 at 11:57 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags