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);
}