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>
  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;
  9. namespace ValidationBottstrapAlerts
  10. {
  11. public partial class index : System.Web.UI.Page
  12. {
  13. protected void Page_Load(object sender, EventArgs e)
  14. {
  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.