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.