Tuesday 7 February 2012

Validate DetailView Control (ASP.NET, C#)

Problem
I use the DetailView Control connected to a DataSource to let the user insert new data. The DetailView Control has two fields: CustomerName and CustomerEmail. I have to control the user input to avoid invalid data or fields empty.


Impact
The application gets no values or invalid data, it will cause an error when you insert a new record in the database due to requiements of the fields in the database.



Solution
Use Validation Controls: RequiredFieldValidator (to ensure that a value has been provided) and RegularExpressionValidator (to validate a value against a regular expression). To add validation controls to the inserting interface, the BoundFields used by the DetailsView control need to be converted into TemplateFields. To achieve this, click on the Edit Fields link in the DetailsView's smart tags.

After the TextBox in the  CustomerName EditItemTemplate, add a RequiredFieldValidator by dragging it from the Toolbox into the template-editing interface. Repeat the steps for CustomerEmail. Next, set each RequiredFieldValidator's ControlToValidate property to InsertCustomerName and InsertCustomerEmail, respectively. Finally, set the ErrorMessage property to "e field is required." and the Text property to "*". (if the Text property value is omitted, the ErrorMessage property value is also the text displayed by the validation control on invalid input).

Placing after the RequiredFieldValidator for CustomerEmail, , add also a RegularExpressionValidator, and set the ControlToValidate property to InsertCustomerEmail, its ErrorMessage property to "The email is not valid.", and its Text property to "*".


Code
<Fields>    <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" />
    <asp:TemplateField HeaderText="Customer Name" SortExpression="CustomerName">
         <InsertItemTemplate>
              <asp:TextBox ID="InsertCustomerName" runat="server" Text='<%# Bind("CustomerName") %>'></asp:TextBox>
              <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="InsertCustomerName"
                ErrorMessage="Customer Name is required." Display="Dynamic">*
              </asp:RequiredFieldValidator>
         </InsertItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField HeaderText="Customer Email" SortExpression="CustomerEmail">
         <InsertItemTemplate>
              <asp:TextBox ID="InsertCustomerEmail" runat="server" Text='<%# Bind("CustomerEmail") %>'></asp:TextBox>
              <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="InsertCustomerEmail"
                 ErrorMessage="Customer Email is required." Display="Dynamic">*
              </asp:RequiredFieldValidator>
              <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="InsertCustomerEmail"
                ErrorMessage="Customer Email is not valid." ValidationExpression='\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*' Display="Dynamic">*
              </asp:RegularExpressionValidator>
         </InsertItemTemplate>
     </asp:TemplateField>
     <asp:CommandField ShowInsertButton="True" />

</Fields


Conclusion
To ensure that the user enters required inputs in a correct format in the inserting interface of the DetailView Control, you should convert the BoundFields into TemplateFields and add the Validation Controls to the appropriate template(s).

1 comment:

  1. Add Validation Group for Required Field Validator and then add it to tag of Details View as well as GridView. This step is required for only updating/editing the gridview record else its not allowing to update only GridView records because of "Required Field Validator" in DetailsView.

    ReplyDelete