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 and also demonstrate how to add JavaScript to your ASPX pages.
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.
-
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
-
-
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.
-
<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>
-
Adding the Client Side Script to your .NET Web Application
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:
-
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
-
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
