TextBox validation for numeric characters.

Hi i'm using javascript to validate the entries in my text box. First i'm using the keydown event to check for each keystroke which works fine. I also have an onchange event to catch paste events. Right now my code just discards characters on paste and prints just the numbers. My requirements are as follows though:
If a user types in 1234 and then pastes abcd2hsd i want abcd2hsd to get discarded but i want 1234 to remain in the textbox. Onchange can either take off the entire word or just the unnecessary alphabets. Is there a way to do this? My code is as follows:

ApplicationInstance.getActive().enqueueCommand(new JavaScriptEval("document.getElementById('" + renderId + "').onkeydown = function(event){event=event || window.event; if((event.keyCode >= 48 && event.keyCode <= 57)||(event.keyCode >= 96 && event.keyCode <= 105)||(event.keyCode == 8 ) ||(event.keyCode == 9) || (event.keyCode == 12)|| (event.keyCode == 13) || (event.keyCode == 16)|| (event.keyCode == 27) || (event.keyCode == 37) || (event.keyCode == 39) || (event.keyCode == 46) ||(event.keyCode == 188) ||(event.keyCode == 190) || (event.ctrlKey && event.keyCode == 86 )){return true;}else{return false;}}"));

ApplicationInstance.getActive().enqueueCommand(new JavaScriptEval("document.getElementById('" + renderId + "').onchange = function(){var string = this.value;var validChars = \"1234567890,.\"; var i;var returnVal =\"\"; for ( i = 0; i < string.length; i++ ){var char = string.charAt(i);if( validChars.indexOf(char) != -1 ){returnVal += char;}} this.value = returnVal;}"));

 

Yes this can be done quite easily. There are actually quite a few ways of doing this but I will show you one that makes the most sense.

Here is a simple input field. The key parts are the id name and the onblur.

<input type="text" onblur="removeLetters(this.value)" id="field" />

Code (markup):

Here is the javascript. Once the users clicks outside of the textfield this code gets called. What it does is it cycles through each character in the textfield. It checks to see if the character is an int; if so it keeps it, if not it removes it. Once the script finishes it will replace the textfield code with the new int only text

<script type="text/javascript" language="javascript">
function removeLetters(str){
	document.getElementById("field").value = "";
	var len = str.length;
	var tempStr = "";
	for(var i=0;i<len;i++){
		var tmp = str.substr(i,1);
		var check = parseInt(tmp); 
		if(!isNaN(check)){
			tempStr = tempStr + tmp;
		}
	}
	document.getElementById("field").value = tempStr;
}
</script>

Code (markup):

Nice and simple and it should be no issue implementing it into your current code.

 

Hi,
Thanks for the reply. I have a small problem though. I want to make sure that the validation is done before the focus leaves the text box. The reason being, if this box is used on a purchase order or money transfer in a bank, and the user presses submit, the user wouldn't have the time to change the value before he presses submit. I looked at the onpaste event but i wasn't sure of the events used with it. Is there any way to do this? Thanks.

-Archana

 

Its simple call the function on keypress

ex: <input type="text" onkeypress="removeLetters(this.value)" id="field" />

Simple huh !!!

 

Use the code given by bigrollerdave but also check the field from within the onsubmit() function of the form. If the textbox contains non-numeric characters then 'return false;' and display an error. This will prevent the form from submitting if the user's input is invalid.

 

Hi i just wanted to add to all this: I solved the problem.
Problem defn: Create a textbox component that takes in only numeric values including . and ,
Make sure that a paste is also validated, even before the submit is hit or the focus is moved away from the textbox.
Code:
ApplicationInstance.getActive().enqueueCommand(new JavaScriptEval("document.getElementById('" + renderId + "').onkeydown =
function(event)
{
event=event || window.event;
if(event.shiftKey && event.keyCode>=48 && event.keyCode<=57)return false;if((event.keyCode >= 48 && event.keyCode <= 57)||(event.keyCode >= 96 && event.keyCode <= 105)||(event.keyCode == 8 ) ||(event.keyCode == 9) || (event.keyCode == 12) || (event.keyCode == 27) || (event.keyCode == 37) || (event.keyCode == 39) || (event.keyCode == 46) ||(event.keyCode == 188) ||(event.keyCode == 190) || (event.ctrlKey && event.keyCode == 86 ))
{
previous=this.value+String.fromCharCode(event.keyCode);
return true;
}
else
{
return false;
}}"));
ApplicationInstance.getActive().enqueueCommand(new JavaScriptEval("document.getElementById('" + renderId + "').onpaste =
function(event)
{
var fvOnChange= window.clipboardData.getData('Text');
var patt1=/[^0-9,.]/;
if(fvOnChange.match(patt1)!=null)
window.clipboardData.setData('Text',\"\");
else
window.clipboardData.setData('Text',fvOnChange);
}"));

Let me know if there are any questions. The onpaste event works for IE but doesn't work for firefox. Onpaste gets triggered for firefox but the clipboard cannot be accessed for us to do the validation. I still haven't figured that part out yet. It would be great if someone could chip in. Thanks.

-Archana