Filtering user input is extremely important for web programming.
If input is left unfiltered users can input malicious code that can cripple your website.
This article will explain how to make sure that the user only submits a number to your .NET web application.
Server Side Validation
It is strongly recommended that you check all input submitted to the server in your server side code. It is possible for users get around your client side checks and submit malicious code. Whenever a web form is submitted, you should check to make sure that all fields contain valid data to help prevent your web site from being hacked.
In this case we need to check to see if the user has entered a number into a text box called TXT_Number after clicking a button named Button1.
Code: ( text )
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Try
Integer.Parse(TXT_Number.Text)
Catch ex As Exception
LBL_NumberError.Text = "You have not entered a number"
End Try
End Sub
Code: ( text )
private void Button1_Click(object sender, EventArgs e)
{
try
{
int.Parse(TXT_Number.Text);
}
catch
{
LBL_NumberError.Text = "You have not entered a number";
}
}
In this code, if the text value in the TXT_Number text box was not a number then Integer.Parse() would throw an exception. The exception is then caught and an error message is displayed in the label LBL_NumberError. This is the simplest way I can think of to check if the user has entered a number.
Client Side Validation
Say we don't even want the user to be able to enter numbers into the text box. To do this we have to use a client side script.
The following JavaScript code snippet checks the key the user pressed and returns False if it was not a number.
Code: ( text )
<script type="text/javascript">
<!--
function NumberFilter(e)
{ /*Grabbing the unicode value of the key that was pressed*/
var unicode;
try
{ /*IE*/
unicode = e.keyCode;
}
catch(err)
{
try
{ /*Netscape, Mozilla, FireFox...*/
unicode = event.keyCode;
}
catch(error)
{ /*Other*/
unicode = e.which;
}
}
/*if the value entered is not a unicode value between 48 and 57 return false*/
if(unicode < 48 || unicode > 57)
{
return false;
}
return true;
}
-->
</script>
I bet you're wondering how to use this code in your .NET web application.
Its pretty simple.
First, you copy the code into the body of your aspx page.
Or you could register the script using ClientScript.RegisterStartupScript:
Code: ( text )
If Not Page Is Nothing Then
If Not ClientScript.IsStartupScriptRegistered("NumberScreening_Script") Then
Dim sb As StringBuilder = New StringBuilder
sb.Append("<script type='text/javascript'> "+ vbLF + "<!--")
sb.Append(" function NumberFilter(e)" + vbLf)
sb.Append("{" + vbLf)
sb.Append(" var unicode;" + vbLf)
sb.Append(" try" + vbLf)
sb.Append(" {" + vbLf)
sb.Append(" unicode = e.keyCode; " + vbLf)
sb.Append(" }" + vbLf)
sb.Append(" catch(err)" + vbLf)
sb.Append(" { " + vbLf)
sb.Append(" try" + vbLf)
sb.Append(" {" + vbLf)
sb.Append(" unicode = event.keyCode;" + vbLf)
sb.Append(" }" + vbLf)
sb.Append(" catch(error)" + vbLf)
sb.Append(" { " + vbLf)
sb.Append(" unicode = e.which;" + vbLf)
sb.Append(" }" + vbLf)
sb.Append(" }" + vbLf)
sb.Append(" if(unicode < 48 || unicode > 57)" + vbLf)
sb.Append(" { " + vbLf)
sb.Append(" return false;" + vbLf)
sb.Append(" } " + vbLf)
sb.Append(" return true;" + vbLf)
sb.Append("}" + vbLf)
sb.Append("// -->" + vbLf)
sb.Append("</script>" + vbLf)
ClientScript.RegisterStartupScript(Page.GetType, "NumberScreening_Script", sb.ToString())
End If
End If
It is advisable to use this second method if you are including the script into a web user control to ensure that the script is only written to the browser once since it's possible to have multiple instances of this control on the web site.
Calling the Client Side Script
Once you have your client side script included into your aspx page, you need to call the JavaScript function that filters your text box. You do this by adding the "OnKeyPress" attribute to the text box that should hold the number value. (Recall that the text box for this example is called TXT_Number.)
To do this you simply do the following
Code: ( text )
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
TXT_Number.Attributes.Add("OnKeyPress", "return NumberFilter()")
End Sub
Every time a key is pressed while the user enters input into your text box, the JavaScript function will check if the value was a number and returns "true" to allow that character to be entered into the text box if it is, otherwise it returns "false" and nothing is added to the text box.
Using JavaScript to ensure that the user can only enter a number is very powerful but remember that there are ways to get around this. Always be sure to include Server Side data validation to make certain that data is valid before using it.
I hope you found this helpful!
Happy Coding!
-Frinny
