HTML and CSS Reference
In-Depth Information
As you can see, the
ErrorMessages
table contains three columns:
Id
,
ErrorCode
, and
ErrorMessageText
.
The
ErrorCode
column contains a short code for an error (such as
INVALIDDATE
), and the
ErrorMessageText
column holds the descriptive error message (for example, “The Hire Date must be later than Birth Date”).
Listing 6-17 shows the markup for the
ItemTemplate
of the
Repeater
server control that renders the
employee list.
Listing 6-17.
Web Form Markup That Shows the Employee List
<ItemTemplate>
<tr id='<%# Eval("EmployeeID","emp{0}") %>'
data-employeeid='<%# Eval("EmployeeID") %>'>
<td><%# Eval("FirstName") %> <%# Eval("LastName") %></td>
<td><asp:TextBox ID="txtBirthDate" runat="server" TextMode="Date"
Text='<%# Eval("BirthDate") %>'
data-error-invaliddate='<%# GetValidationMessage("INVALIDDATE") %>'>
</asp:TextBox></td>
<td><asp:TextBox ID="txtHireDate" runat="server" TextMode="Date"
Text='<%# Eval("HireDate") %>'
data-error-invaliddate='<%# GetValidationMessage("INVALIDDATE") %>'>
</asp:TextBox></td>
<td><input type="button" value="Save"/></td>
</tr>
</ItemTemplate>
This markup consists of two
TextBox
server controls that display the
BirthDate
and
HireDate
column
values, respectively. The
TextMode
property of these text boxes is set to
Date
so that a date-picker is
displayed to select the dates. Each text box has a custom data attribute named
data-error-invaliddate
.
The value of this attribute comes from the
GetValidationMessage()
function.
GetValidationMessage()
picks up the
ErrorMessageText
from the
ErrorMessages
table based on the
ErrorCode
passed:
public string GetValidationMessage(string errorCode)
{
ValidationDbEntities db = new ValidationDbEntities();
var data = from item in db.ErrorMessages
where item.ErrorCode == errorCode
select item.ErrorMessageText;
return data.SingleOrDefault();
}
The jQuery code that performs the validation and displays the validation error, if any, resides in the
Save button's
click
event handler. This code is shown in Listing 6-18.
Listing 6-18.
Validating the Age of an Employee
$("input[value='Save']").click(function () {
var birthDateTxtbox = $(this).closest('tr').children().eq(1).children().eq(0);
var hireDateTxtbox = $(this).closest('tr').children().eq(2).children().eq(0);
var birthDate = ToDate($(birthDateTxtbox).val());
var hireDate = ToDate($(hireDateTxtbox).val());
birthDate.setFullYear(birthDate.getFullYear() + 18);
if ((hireDate.getTime() - birthDate.getTime()) < 0) {
