Click to learn how to rotate images dynamically with the ASP.NET Image Control
Home
Step by Step ASP.NET Design Solutions
Home
The Ultimate Website Design Guide Using ASP.NET and Adobe Photoshop

Website Design Guide

Search Engine Submission

 

They Said It Best
Any science or technology which is sufficiently advanced is indistinguishable from magic.
Arthur C. Clarke

 

Web Forms Validation

Every web site should have a Contact form for visitors to communicate with you. If you have ever designed and maintained a Contact form you'll know that data validation is critical otherwise you'll get a lot of people submitting the form without entering any information or putting special characters like "!#" or putting numbers in alpha only field and vice versa. Using form field validation prevents this from happening.

Visual Studio and ASP.Net makes everything really easy for developers. ASP.NET Web server controls are objects on ASP.NET Web pages that run when the page is requested and that render markup to the browser. Many Web server controls are similar to familiar HTML elements, such as buttons and text boxes. Other controls encompass complex behavior, such as a calendar controls, and controls that you can use to connect to data sources and display data.

Our example will have the following steps.

Step 1. ASP.Net Server Controls

  1. Using Visual Studio.Net create a new webform called contact.aspx.
  2. Add TextBox Web Server Control for first name
  3. Add a Required Field Validator Control
  4. Add a Validation Summary Control
  5. Add a Regular Expression Validator
 
<asp:Label id=statusLabel Runat=server/>
  <form method="post" runat=server action="contact.aspx" id="frmInfo" name="frmInfo">
<p>Please submit this form to contact us</p> <p>&nbsp;</p>

  <table align="left" width=300 border="0" cellpadding="1" cellspacing="1" >
  <tr>
    <td colspan=3 width="100%" valign="top" align="left">     
        <asp:ValidationSummary ID="ValidationSummary1" runat=server 
        HeaderText="Please Check the Errors Below:" />
    </TD>
    </tr>
    <tr>
    <td width=1% valign=top>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat=server ControlToValidate=FName 
        ErrorMessage="First Name is required.">*</asp:RequiredFieldValidator>
    </td>
      <td valign=top align="left" width="40%">First Name</td>
      <td  valign=top align="left" width="59%">        
      <asp:textbox runat=server ID="FName"  runat=server size="20" maxlength="25" />
      <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat=server 
            ControlToValidate="FName" 
            ErrorMessage="A-Z Only" 
            ValidationExpression="^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$" />
          
      </td>
    </tr>    
    <tr>
        <td colspan="3" align="center" width="100%">
      <asp:button id="Button1" OnClick="frmValidate" text="Submit" Runat=server /> </p>
      </td>    
    </tr>       
    </table>
 </form>

In the example above you can see our First Name textbox is called "FName". We've set the required field validator ControlToValidate=FName so people can't submit the form without entering anything. By putting this into a separate column in our HTML table we'll get a nicely aligned red * next to textbox and as we add more html fields they will all lignup in the same column.

The regular expression validator performs our data checking. Again the ControlToValidate is set to FName.

As our example continues below we have a complete contact form using First Name, Last Name, Street Address, City, State, Zip, Email, and a Question field. We've included a helpful "I prefered to be contacted by" radio button in case vistor wants to choose between a phone call or email. 

<form method="post" runat=server action="contact.aspx" id="frmInfo" name="frmInfo">
<p>If you have any questions regarding practices or would like any additional information 
please submit this form.</p>  <p>&nbsp;</p>

  <table align="left" width=300 border="0" cellpadding="1" cellspacing="1" >
  <tr>
    <td colspan=3 width="100%" valign="top" align="left"> 
    
    <asp:ValidationSummary ID="ValidationSummary1" runat=server HeaderText="Please 
    Check the Errors Below:" /></TD></tr>

    <tr>
    <td width=1% valign=top><asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat=server 
    ControlToValidate=FName ErrorMessage="First Name is required.">*</asp:RequiredFieldValidator></td>
      <td valign=top class="category" align="left" width="40%">First Name</td>
      <td  valign=top align="left" width="59%">        
      <asp:textbox runat=server ID="FName"  runat=server size="20" maxlength="25" />
      <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat=server 
            ControlToValidate="FName" 
            ErrorMessage="A-Z Only" 
            ValidationExpression="^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$" />
          
      </td>
    </tr>    
    
     <tr>
    <td width=1% valign=top><asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat=server 
    ControlToValidate=LName ErrorMessage="Last Name is required.">*</asp:RequiredFieldValidator></td>
      <td valign=top class="category" align="left" width="40%">Last Name</td>
      <td  valign=top align="left" width="59%">      
      <asp:textbox runat=server ID="LName"  runat=server size="20" maxlength="25"  />
      <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat=server 
            ControlToValidate="LName" 
            ErrorMessage="Invalid Characters" 
            ValidationExpression="^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$" />
      </td>
    </tr>  
     <tr>
    <td width=1% valign=top><asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat=server 
    ControlToValidate=Street ErrorMessage="Street is required.">*</asp:RequiredFieldValidator></td>
      <td valign=top class="category" align="left" width="40%">Street</td>
      <td  valign=top align="left" width="59%">      
      <asp:textbox runat=server ID="Street"  runat=server size="20" maxlength="25"  />
      <asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat=server 
            ControlToValidate="Street" 
            ErrorMessage="25 Characters Only" 
            ValidationExpression="^[a-zA-Z0-9\s.\-]+$" />
      </td>
    </tr>    
    <tr>
    <td width=1% valign=top><asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat=server 
    ControlToValidate=City ErrorMessage="City is required.">*</asp:RequiredFieldValidator></td>
      <td valign=top class="category" align="left" width="40%">City</td>
      <td  valign=top align="left" width="59%">      
      <asp:textbox runat=server ID="City"  runat=server size="20" maxlength="25"  />
      <asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat=server 
            ControlToValidate="City" 
            ErrorMessage="25 Characters Only" 
            ValidationExpression="^[a-zA-Z0-9\s.\-]+$" />
      </td>
    </tr>    
    <tr>
    <td width=1% valign=top><asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat=server 
    ControlToValidate=State ErrorMessage="State is required.">*</asp:RequiredFieldValidator></td>
      <td valign=top class="category" align="left" width="40%">State</td>
      <td  valign=top align="left" width="59%">      
      	<asp:DropDownList ID=State Runat=Server  >				
        <asp:listitem value="">Choose State</asp:listitem>
        <asp:listitem value="AL">ALABAMA</asp:listitem> 
        <asp:listitem value="AK">ALASKA</asp:listitem> 
        <asp:listitem value="AZ">ARIZONA</asp:listitem> 
        <asp:listitem value="AR">ARKANSAS</asp:listitem> 
        <asp:listitem value="CA">CALIFORNIA</asp:listitem> 
        <asp:listitem value="CZ">CANAL ZONE</asp:listitem> 
        <asp:listitem value="CO">COLORADO</asp:listitem> 
        <asp:listitem value="CT">CONNECTICUT</asp:listitem> 
        <asp:listitem value="DE">DELAWARE</asp:listitem> 
        <asp:listitem value="DC">DISTRICT OF COLUMBIA</asp:listitem> 
        <asp:listitem value="FL">FLORIDA</asp:listitem> 
        <asp:listitem value="GA">GEORGIA</asp:listitem> 
        <asp:listitem value="GU">GUAM</asp:listitem> 
        <asp:listitem value="HI">HAWAII</asp:listitem> 
        <asp:listitem value="ID">IDAHO</asp:listitem> 
        <asp:listitem value="IL">ILLINOIS</asp:listitem> 
        <asp:listitem value="IN">INDIANA</asp:listitem> 
        <asp:listitem value="IA">IOWA</asp:listitem> 
        <asp:listitem value="KS">KANSAS</asp:listitem> 
        <asp:listitem value="KY">KENTUCKY</asp:listitem> 
        <asp:listitem value="LA">LOUISIANA</asp:listitem> 
        <asp:listitem value="ME">MAINE</asp:listitem> 
        <asp:listitem value="MH">MARSHALL ISLANDS</asp:listitem> 
        <asp:listitem value="MD">MARYLAND</asp:listitem> 
        <asp:listitem value="MA">MASSACHUSETTS</asp:listitem> 
        <asp:listitem value="MI">MICHIGAN</asp:listitem> 
        <asp:listitem value="MN">MINNESOTA</asp:listitem> 
        <asp:listitem value="MS">MISSISSIPPI</asp:listitem> 
        <asp:listitem value="MO">MISSOURI</asp:listitem> 
        <asp:listitem value="MT">MONTANA</asp:listitem> 
        <asp:listitem value="NE">NEBRASKA</asp:listitem> 
        <asp:listitem value="NV">NEVADA</asp:listitem> 
        <asp:listitem value="NH">NEW HAMPSHIRE</asp:listitem> 
        <asp:listitem value="NJ">NEW JERSEY</asp:listitem> 
        <asp:listitem value="NM">NEW MEXICO</asp:listitem> 
        <asp:listitem value="NY">NEW YORK</asp:listitem>      
        <asp:listitem value="NC">NORTH CAROLINA</asp:listitem> 
        <asp:listitem value="ND">NORTH DAKOTA</asp:listitem> 
        <asp:listitem value="OH">OHIO</asp:listitem> 
        <asp:listitem value="OK">OKLAHOMA</asp:listitem> 
        <asp:listitem value="OR">OREGON</asp:listitem> 
        <asp:listitem value="OT">OTHER (FOREIGN)</asp:listitem> 
        <asp:listitem value="PW">PALAU</asp:listitem> 
        <asp:listitem value="PA">PENNSYLVANIA</asp:listitem> 
        <asp:listitem value="PR">PUERTO RICO</asp:listitem> 
        <asp:listitem value="RI">RHODE ISLAND</asp:listitem> 
        <asp:listitem value="SC">SOUTH CAROLINA</asp:listitem> 
        <asp:listitem value="SD">SOUTH DAKOTA</asp:listitem> 
        <asp:listitem value="TN">TENNESSEE</asp:listitem> 
        <asp:listitem value="TX">TEXAS</asp:listitem> 
        <asp:listitem value="UT">UTAH</asp:listitem> 
        <asp:listitem value="VT">VERMONT</asp:listitem> 
        <asp:listitem value="VI">VIRGIN ISLANDS</asp:listitem> 
        <asp:listitem value="VA">VIRGINIA</asp:listitem> 
        <asp:listitem value="WA">WASHINGTON</asp:listitem> 
        <asp:listitem value="WV">WEST VIRGINIA</asp:listitem> 
        <asp:listitem value="WI">WISCONSIN</asp:listitem> 
        <asp:listitem value="WY">WYOMING</asp:listitem>
			</asp:DropDownList>
      </td>
    </tr>    
    <tr>
    <td width=1% valign=top><asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat=server 
    ControlToValidate=Zip ErrorMessage="Zip is required.">*</asp:RequiredFieldValidator></td>
      <td valign=top class="category" align="left" width="40%">Zip</td>
      <td  valign=top align="left" width="59%">      
      <asp:textbox runat=server ID="Zip"  runat=server size="10" maxlength="10"  />
      <asp:RegularExpressionValidator ID="RegularExpressionValidator6" runat=server 
            ControlToValidate="Zip" 
            ErrorMessage="Proper Zip Code Only" 
            ValidationExpression="^(\d{5}-\d{4}|\d{5})$|^([a-zA-Z]\d[a-zA-Z] \d[a-zA-Z]\d)$" />
      </td>
    </tr>    
     <tr>
    <td width=1% valign=top><asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat=server 
    ControlToValidate=email ErrorMessage="Email is required.">*</asp:RequiredFieldValidator></td>
      <td valign=top class="category" align="left" width="40%">Email</td>
      <td  valign=top align="left" width="59%">      
      <asp:textbox runat=server ID="email"  runat=server size="15" maxlength="100"  />
      <asp:RegularExpressionValidator ID="RegularExpressionValidator7" runat=server 
            ControlToValidate="email" 
            ErrorMessage="Invalid Format"  ValidationExpression=
            "^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$" />
      </td>
    </tr>          
   
  <tr>
    <td width=1% valign=top><asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat=server 
    ControlToValidate=Telephone ErrorMessage="Please Use: XXX-XXX-XXXX" >*</asp:RequiredFieldValidator></td>
      <td valign=top class="category" align="left" width="40%">Telephone</td>
      <td  valign=top align="left" width="59%">      
      <asp:textbox runat=server ID="Telephone"  runat=server size="15" maxlength="100"  />
      <asp:RegularExpressionValidator ID="RegularExpressionValidator8" runat=server 
            ControlToValidate="Telephone"             
            ValidationExpression="^[01]?[- .]?(\([2-9]\d{2}\)|[2-9]\d{2})[- .]?\d{3}[- .]?\d{4}$" >
            Use XXX-XXX-XXXX </asp:RegularExpressionValidator>
      </td>
    </tr>           
    <tr>
     <td width=1% valign=top>&nbsp;</td>
      <td class="category" colspan="2" align="left" 
      width="100%">I prefer to be contacted
        <asp:radiobuttonlist id="Contactme" runat=server>
        <asp:listitem id=option1  Selected Value="by email" runat=server />
        <asp:listitem id=option2 Value="by phone" runat=server />      
        </asp:radiobuttonlist>
      </td>
      </tr>
         <tr>
    <td width=1% valign=top><asp:RequiredFieldValidator ID="RequiredFieldValidator10" runat=server 
    ControlToValidate=Question ErrorMessage="Question is required.">*</asp:RequiredFieldValidator></td>
      <td valign=top class="category" align="left" width="40%">Question</td>
      <td  valign=top align="left" width="59%">      
      <asp:textbox textmode=multiline rows=10 columns=30  runat=server ID="Question" 
       runat=server size="20"   />
       <asp:RegularExpressionValidator ID="RegularExpressionValidator5" runat=server 
            ControlToValidate="Question" 
            ErrorMessage="No special characters please." 
            ValidationExpression="^[a-zA-Z0-9\s.\?\,\'\;\!\-]+$" />
      </td>
    </tr>           
		<tr>
      <td colspan="3" align="center" width="100%">
      <p>&nbsp;<p><asp:button id="btnsubmit" OnClick="frmValidate" 
      text="Submit" Runat=server  /> </p>
      </td>    
    </tr>       
  </table>	  		
</form>
Copyright © 2009 dotnetdesignguide.com  webmaster@dotnetdesignguide.com  Sponsored by Vitality-Now.com