Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript
I have a textbox need to restrict user to put number in between range of -4713 and +9999 only in javascript.
Posted 9-May-11 19:33pm
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Restrict? No! You can validate it at the moment of use; that would be a right solution.
 
As to restriction during entering data… Do be logical! You can handle keyboard event and filter some characters (and you should do it), but the range… Whatever you do, it will be ugly and confuse your customer. Imaging entering 999 and adding one more character on the right: 1 should be allowed and 9 filtered out! Just forget it. Filter out all characters but digits and minus, let the user enter anything. At the moment of use, try convert to integer and show error if the value is outside the range. That's is.
 
Here is how to filter out:
<html>
   <head>
      <script type="text/javascript"><!--
         function filterDigits(eventInstance) { 
            eventInstance = eventInstance || window.event;
                key = eventInstance.keyCode || eventInstance.which;
            if ((47 < key) && (key < 58) || key = 45 || key == 8) {
               return true;
            } else {
                    if (eventInstance.preventDefault) eventInstance.preventDefault();
                    eventInstance.returnValue = false;
                    return false;
            } //if
         } //filterDigits
      --></script>
   </head>
<body">
 
<input type="text" onkeypress="filterDigits(event)"/>
 
</body>
</html>
 
—SA
  Permalink  
v3
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

We cannot restrict this. what we can do which is closest to this is have only allowed characters and not let user to move away if he entered a wrong value.
 
1. Set the maxlength of the textbox to 5. (1 extra to accept the - sign)
2. restrict having characters other than numbers and - sign
 
Here is a small function for that
//Function to create textbox based on regular expressions
function AcceptRegExOnly(event, regex)
{
    var keyCode = event.which ? event.which : event.keyCode;
 
    var keyPressed = String.fromCharCode(keyCode);
    return regex.test(keyPressed);
};
 
and this is how it can be used
<asp:TextBox ID="TextBox2" runat="server" onkeypress="return AcceptRegExOnly(event, /^[0-9-]$/);" onblur="return validateOnBlur(this);" MaxLength="5"></asp:TextBox><br />
 
3. Now validate the value onblur event of this textbox. here is the function for that
 
 function validateOnBlur(sender)
        {
            var num = Number(sender.value);
            if(num < -4713 || num > 9999)
            {
                alert('invalid value');
                sender.focus();
                return false;
            }
            return true;
        }
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

Yes you can not restrict user from doing, instead you can validate user input.
 
If you're using ASP.NET than use range validator otherwise following javascript code will perform validation:
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript">
	function validateEntry(sender){
 
		if(isNaN(sender.value))
		{
			alert("Invalid Number");
			sender.style.background="#FF9EB1";
		}
		else if(!(-4713<=sender.value && sender.value<=9999))
		{
			alert("Value is out of range");
			sender.style.background="#FF9EB1";			
		}
	}
</script>
</head>
 
<body>
	<input type="text" onchange="validateEntry(this)" />
</body>
 
</html>
 
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Advertise | Privacy | Mobile
Web01 | 2.8.141223.1 | Last Updated 28 Jun 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100