Post
Ask Question

Basic Manual Validation Using ASP.NET

In this blog, we will create a registration form in ASP.NET, using Bootstrap and basic Manual Validation, in C# and will be showing the bootstrap alerts to the users.

Design

Step 1 - Go to Visual Studio and create new ASP.NET web application.
Step 2 - Create a new Webpage like index.aspx. Design the page as shown below. 

output

Here is the HTML code of the Index page design, shown above.

  1. <html>  
  2. <head runat="server">  
  3.     <title>Manual validation using c#</title>  
  4.     <meta charset="utf-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  6.     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
  8.     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  9.       <style type="text/css">  
  10.         .messagealert {  
  11.             width: 100%;  
  12.             position: absolute;  
  13.             top: 40%;  
  14.             z-index: 999;  
  15.             padding: 0;  
  16.             font-size: 15px;  
  17.             text-align: center;  
  18.         }  
  19.     </style>  
  20.     <script type="text/javascript">  
  21.         function ShowMessage(message, messagetype) {  
  22.             var cssclass;  
  23.             switch (messagetype) {  
  24.                 case 'Success':  
  25.                     cssclass = 'alert-success'  
  26.                     break;  
  27.                 case 'Error':  
  28.                     cssclass = 'alert-danger'  
  29.                     break;  
  30.                 case 'Warning':  
  31.                     cssclass = 'alert-warning'  
  32.                     break;  
  33.                 default:  
  34.                     cssclass = 'alert-info'  
  35.             }  
  36.             $('#alert_container').append('<div id="alert_div" style="margin: 0 0.5%; -webkit-box-shadow: 3px 4px 6px #999;" class="alert fade in ' + cssclass + '"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>' + messagetype + '!</strong> <span>' + message + '</span></div>');  
  37.         }  
  38.     </script>  
  39. </head>  
  40. <body>  
  41.     <form id="form1" runat="server">  
  42.          <div class="messagealert" id="alert_container">  
  43.          </div>  
  44.         <div class="container">  
  45.             <div class="row">  
  46.                 <div class="col-md-4 col-md-offset-4" style="padding: 10px; margin-top: 2em;">  
  47.                     <div class="panel panel-success">  
  48.                         <div class="panel-heading">Registeration Form</div>  
  49.                         <div class="panel-body">  
  50.                             <label>User Name</label>  
  51.                             <asp:TextBox ID="uname" runat="server" CssClass="form-control" placeholder="User Name"></asp:TextBox>  
  52.                             <label>Last Name</label>  
  53.                             <asp:TextBox ID="lname" runat="server" CssClass="form-control" placeholder="Last Name"></asp:TextBox>  
  54.                             <label>Mobile</label>  
  55.                             <asp:TextBox ID="mobile" runat="server" CssClass="form-control" placeholder="Mobile"></asp:TextBox>  
  56.                             <label>Email</label>  
  57.                             <asp:TextBox ID="email" runat="server" CssClass="form-control" placeholder="Email"></asp:TextBox>  
  58.                             <br />  
  59.                         </div>  
  60.                         <div class="panel-footer"> <asp:Button ID="Button1" runat="server" CssClass=" btn btn-block btn-success" Text="Submit" OnClick="Button1_Click" /></div>  
  61.                     </div>                           
  62.                 </div>  
  63.             </div>  
  64.   
  65.         </div>  
  66.     </form>  
  67. </body>  
  68. </html>  
Code Behind
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text.RegularExpressions;  
  5. using System.Web;  
  6. using System.Web.UI;  
  7. using System.Web.UI.WebControls;  
  8.   
  9. namespace ValidationBottstrapAlerts  
  10. {  
  11.     public partial class index : System.Web.UI.Page  
  12.     {  
  13.         protected void Page_Load(object sender, EventArgs e)  
  14.         {  
  15.   
  16.         }  
  17.         public enum MessageType { Success, Error, Info, Warning };  
  18.         protected void ShowMessage(string Message, MessageType type)  
  19.         {  
  20.             ScriptManager.RegisterStartupScript(this, this.GetType(), System.Guid.NewGuid().ToString(), "ShowMessage('" + Message + "','" + type + "');", true);  
  21.         }  
  22.         protected void Button1_Click(object sender, EventArgs e)  
  23.         {  
  24.             //check empty fields  
  25.             if (uname.Text == "" && lname.Text == "" && mobile.Text == "" && email.Text == "")  
  26.             {                  
  27.                 //Error alert  
  28.                 ShowMessage("Please Enter the fields!!" + "<br/>User name, Last Name, Mobile Number, Email", MessageType.Error);  
  29.             }  
  30.                 //check special characters  
  31.             else if (uname.Text.Contains('+') || uname.Text.Contains('-') || uname.Text.Contains('*') || uname.Text.Contains('/'))  
  32.             {  
  33.                 //Warning Alert  
  34.                 ShowMessage("Special characters not allowed in User Name fields!!", MessageType.Warning);  
  35.             }  
  36.                 //Check Mobile number  
  37.             else if (mobile.Text.Length < 10)  
  38.             {  
  39.                 ShowMessage("Invalid Your Mobile number!!"+mobile.Text, MessageType.Error);  
  40.             }  
  41.             //Check Email Id is valid  
  42.             else if (!IsValidEmailId(email.Text))  
  43.             {  
  44.                 //Error alert  
  45.                 ShowMessage("Invalid Your Email-ID!!"+email.Text, MessageType.Error);  
  46.             }  
  47.             else  
  48.             {  
  49.                 //Success Alert  
  50.                 ShowMessage("Successfully completed|"+uname.Text+"|"+lname.Text+"|"+mobile.Text+"|"+email.Text, MessageType.Success);  
  51.             }  
  52.         }          
  53.         private bool IsValidEmailId(string InputEmail)  
  54.         {  
  55.             //Regex To validate Email Address  
  56.             Regex regex = new Regex(@"^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$");  
  57.             Match match = regex.Match(InputEmail);  
  58.             if (match.Success)  
  59.                 return true;  
  60.             else  
  61.                 return false;  
  62.         }  
  63.     }  
  64. }  
Output

 

output

output
Thus, you can see in the above screenshot that users get alert messages whenever an entry is not valid.
Next Recommended Reading asp.net dropdownlist validation using Required Field Validation