Improved Input Validation - A Comedy of Errors
(Page 8 of 9 )
One thing that has been pretty consistent across all the validation controls you've seen so far has been the display of error messages. I have always placed them just under the corresponding server control. Interestingly, there is one more way to display these ugly error messages to the user, and ensure that he/she rectifies them immediately. How? With a ValidationSummary server control that displays all the error messages at one go. Take a look:
<%@ Page Language="C#" %>
<html>
<head>
<title>Credit Card Information</title>
<basefont face="Arial">
</head>
<body>
<div align="center">
<h2>Credit Card Information</h2>
<form runat="server" method="POST" >
<asp:ValidationSummary runat="server" ID="cc_validsumm" ValidationSummaryDisplayMode="bulletlist" HeaderText="Sorry, the form could not be submitted because the following errors occurred:" />
<!-- Credit Card Number -->
<asp:label id="lblcc_num" runat="server" text="Credit Number: " />
<asp:textbox id="cc_num" runat="server" ></asp:textbox><br/>
<asp:RequiredFieldValidator id="cc_numRFV" ControlToValidate="cc_num" ErrorMessage="Please enter your credit card number!" runat="server" Display="none" EnableClientScript="false"/>
<asp:RegularExpressionValidator id="cc_numREV" runat="server" ControlToValidate="cc_num" ErrorMessage="Please enter the correct credit card number [XXXX-XXXX-XXXX-XXXX]" ValidationExpression="[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}"
Display="none" EnableClientScript="false"/><br/>
<!-- Credit Card Type -->
<asp:label id="lblcc_type" runat="server" text="Credit Card Type
[Mastercard/VISA]: " />
<asp:textbox id="cc_type" runat="server">
</asp:textbox><br/>
<asp:RequiredFieldValidator id="cc_typeRFV" ControlToValidate="cc_type" ErrorMessage="Please select your credit card type!" runat="server" Display="none" EnableClientScript="false"/>
<asp:RegularExpressionValidator id="cc_typeREV" runat="server" ControlToValidate="cc_type" ErrorMessage="Please select whether you have a Mastercard or a VISA!!!" ValidationExpression="Mastercard|VISA"
Display="none" EnableClientScript="false"/><br/>
<!-- Credit Card Date of Expiry -->
<asp:label id="lblcc_doe" runat="server" text="Credit Card Date of
Expiry: " />
<asp:textbox id="cc_doe" runat="server" >
</asp:textbox><br/>
<asp:RequiredFieldValidator id="cc_doeRFV" ControlToValidate="cc_doe" ErrorMessage="Please enter the credit card date of expiry!" runat="server" Display="none" EnableClientScript="false"/>
<asp:RegularExpressionValidator id="cc_doeREV" runat="server" ControlToValidate="cc_doe" ErrorMessage="Please enter the correct date of expiry [MM/YYYY]" ValidationExpression="^([0][1-9]|[1][1-2])/20(0[3-9]|10)$"Display="none" EnableClientScript="false"/> <br/>
<!-- PIN code of card billing address -->
<asp:label id="lblcc_pin" runat="server" text="PIN code of card billing
address: " />
<asp:textbox id="cc_pin" runat="server">
</asp:textbox><br/>
<asp:RequiredFieldValidator id="cc_pinRFV" ControlToValidate="cc_pin" ErrorMessage="Please enter your PIN code!" runat="server" Display="none" EnableClientScript="false"/>
<asp:RegularExpressionValidator id="cc_pinREV" runat="server" ControlToValidate="cc_pin" ErrorMessage="Please enter a correct Pin Code (atleast five digits or more)." ValidationExpression="^[0-9]{5,}$"
Display="none" EnableClientScript="false"/><br/>
<!-- Email Address -->
<asp:label id="lblcc_email" runat="server" text="Email Address: " />
<asp:textbox id="cc_email" runat="server" >
</asp:textbox><br/>
<asp:RequiredFieldValidator id="cc_emailRFV" ControlToValidate="cc_email" ErrorMessage="Please enter your email address!" runat="server" Display="none" EnableClientScript="false"/>
<asp:RegularExpressionValidator id="cc_emailREV" runat="server" ControlToValidate="cc_email" ErrorMessage="Please enter a valid email address!" ValidationExpression=
"^([a-zA-Z0-9])+([.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+
(.[a-zA-Z0-9_-]+)+" Display="none" EnableClientScript="false"/><br/>
<asp:button id="Submit" Text="Submit" runat="server"/>
</form>
</body>
</html>
This example is a copy of one of the previous listings with a few minor changes. In the previous example, the error messages were displayed under the text boxes. However, in this case, they have been grouped together at the top of the page.
Next: Server Control >>
More ASP.NET Articles
More By Harish Kamath (c) Melonfire
/ 14 
