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
<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") %>'>
<td><asp:TextBox ID="txtHireDate" runat="server" TextMode="Date"
Text='<%# Eval("HireDate") %>'
data-error-invaliddate='<%# GetValidationMessage("INVALIDDATE") %>'>
<td><input type="button" value="Save"/></td>
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) {
Search WWH ::

Custom Search