torsdag 4. juni 2009

Validating asp.net textboxes using jQuery

Since I have a page with a lot of textboxes, some which should be integer values, and some which should be double values, I needed a quick way to validate a bunch of them without too much code.

So I ended up with the following code. What it does is separate boxes on the class, and then parse the boxes according to the class. It uses the error css to mark the boxes that does not validate and sets the tooltip to the error message.

Css:

.error
{
border: solid 2px red;
}


asp.net:

<asp:TextBox ID="TextBox3" runat="server" CssClass="doublebox" /><br />
<asp:TextBox ID="TextBox4" runat="server" CssClass="doublebox" /><br />
<asp:TextBox ID="TextBox5" runat="server" CssClass="intbox" /><br />
<asp:TextBox ID="TextBox6" runat="server" CssClass="intbox" /><br />
<asp:Button ID="btnValidate" runat="server"
Text="Validate"
OnClientClick="return validateBoxes();"
OnClick="OnValidate"/>


JavaScript (with jQuery):

function validateInteger(box)
{
var value = box.value;
var integer = parseInt(value);
if (!integer) {
$(box).addClass('error');
box.title = '"' + value + '" is not a number';
return false;
}
$(box).removeClass('error');
return true;
}

function validateDouble(box)
{
var value = box.value;
var float = parseFloat(value);
if (!float) {
$(box).addClass('error');
box.title = '"' + value + '" is not a number';
return false;
}
$(box).removeClass('error');
return true;
}

function validateBoxes() {
var result = 1;
$('.doublebox').each( function() {
result &= validateDouble(this);
});
$('.intbox').each( function() {
result &= validateInteger(this);
});
return Boolean(result);
}