ASP.Net - Textbox validate integer & float / decimal

Back few years ago, when we want to prevent user to key in certain value into the textbox at the client side, we need to write some massive JavaScript to achieve this. When AJAX in place especially builded into VS 2008, it makes programmer life easier by just including the AJAX extender on top of the textbox by setting few parameters and its done.

Here im going to demonstrate the ways you can validate value in your textbox i.e. integer and float by using JavaScript and AJAX

JavaScipt

integer

function validnumber(ev) { ev.returnValue = (ev.keyCode>=48 && ev.keyCode<=57); } <asp:TextBox ID="txtInt" runat="server" onkeypress="validnumber(event)" />

note
Notice that in the textbox, i added an onKeyPress event which is triggered when user press a key on the keyboard. This validnumber function will receive the keypress event. In the JavaScript function i will check which key has being pressed on the keyboard i.e. 0 to 9 and return whether it is a valid integer or not

float/decimal

function validfloat(txt, ev) { ev.returnValue = ((ev.keyCode>=48 && ev.keyCode<=57) ev.keyCode==46 && txt.value.indexOf('.') == -1); } <asp:TextBox ID="txtFloat" runat="server" onkeypress="validfloat(this, event)" />>

note
Notice that in the textbox, i added an onKeyPress event which is triggered when user press a key on the keyboard. This validfloat function will receive the textbox control & the keypress event. In the JavaScript function i will check which key has being pressed on the keyboard i.e. 0 to 9 or fullstop & is it the only fullstop available in the textbox and return whether it is a valid float or not

AJAX

first, make sure AjaxControlToolkit available in your page. i used to include the AjaxControlToolkit in the page directives as below
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

integer

<asp:TextBox ID="txtAjaxInt" runat="server" /> <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" TargetControlID="txtAjaxInt" FilterType="Numbers" runat="server" />

note
I added a AJAX's FilteredTextBoxExtender as an extender to the txtAjaxInt textbox by defining the TargetControlID
To only allow the user to key in integers into this textbox, i specify the FilterType to Numbers

float/decimal

<asp:TextBox ID="txtAjaxFloat" runat="server" /> <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" TargetControlID="txtAjaxFloat" FilterType="Custom, numbers" ValidChars="." runat="server" /> <asp:RegularExpressionValidator id="RegularExpressionValidator1" runat="server" ControlToValidate="txtAjaxFloat" ErrorMessage="Enter a valid float" ValidationExpression="\d+\.\d{2}" /> <asp:button id="btn1" runat="Server" text="test float" />

note
I added a AJAX's FilteredTextBoxExtender as an extender to the txtAjaxFloat textbox by defining the TargetControlID. To only allow the user to key in integers or fullstop into this textbox, i specify the FilterType to Custom, numbers and ValidChars to . which means user can key in any integers only plus fullstop. Drawback on this extender is, it allows user to enter more than one fullstop hence i added in a RegularExpressionValidator to check there is only one fullstop in the textbox by specifying the ValidationExpression to \d+\.\d{2} (only allow user to key in up to 2 decimal point {2}). The RegularExpressionValidator will be triggered when validation take place e.g. click on the button as illustrate above