Validation Summary Using JavaScript Validation In ASP.NET

Here are the steps and code snippet that uses JavaScript validations for Validation Summary in ASP.NET.

Here are the steps and code sample shows use of JavaScript validation like validation summary in ASP.NET.
 
Step 1. Create a Web form something like this below.
  1. <html>  
  2. <head>  
  3. <title></title>  
  4. <link href="/css/hcs/site.css" temp_href="/css/hcs/site.css" rel="stylesheet" type="text/css" />  
  5. </head>  
  6. <div class="request_form">  
  7. <form action="http://abc.com/get.html" class="request_form" enctype="application/x-www-form-urlencoded"  
  8. id="Form" method="post" name="Form">  
  9. <table>  
  10. <tr>  
  11. <th>  
  12. <label>  
  13. * First Name:</label>  
  14. </th>  
  15. <th>  
  16. <label>  
  17. * Last Name:</label>  
  18. </th>  
  19. </tr>  
  20. <tr>  
  21. <td>  
  22. <input class='input_txt1' id="FirstName" maxlength='255' name="FirstName" tabindex='1' type='text' value="" />  
  23. <br>  
  24. </td>  
  25. <td>  
  26. <input class='input_txt1' id="LastName" maxlength='255' name="LastName" tabindex='2' type='text' value="" />  
  27. <br>  
  28. </td>  
  29. </tr>  
  30. <tr>  
  31. <th>  
  32. <label>  
  33. * Company Name:</label>  
  34. </th>  
  35. <th>  
  36. <label>  
  37. * Email Address:</label>  
  38. </th>  
  39. </tr>  
  40. <tr>  
  41. <td>  
  42. <input class='input_txt1' id="Company" maxlength='255' name="Company" tabindex='3' type='text' value="" />  
  43. <br>  
  44. </td>  
  45. <td>  
  46. <input class='input_txt1' id="Email" maxlength='255' name="Email" tabindex='4' type='text' value="" />  
  47. <br>  
  48. </td>  
  49. </tr>  
  50. <tr>  
  51. <td colspan="2" align="right">  
  52. <input id='FrmSubmit' name='submitButton' class="input_submit" type='submit' value='Submit' onclick='return validate();'>  
  53. </td>  
  54. </tr>  
  55. </table>  
  56. </form>  
  57. </div>  
  58. </html>  
Step 2. Add given script and call this on button onclick event by onclick='return validate();'. \
  1. <script type="text/javascript">    
  2. function validate() {    
  3. var FirstName = document.getElementById('FirstName').value;    
  4. var LastName = document.getElementById('LastName').value;    
  5. var Company = document.getElementById('Company').value;    
  6. var Email = document.getElementById('Email').value;    
  7. var errors = "";    
  8. if (FirstName == "") {    
  9. errors += "Please enter your First name.\n";    
  10. }    
  11. if (LastName == "") {    
  12. errors += "* Please enter your last name.\n";    
  13. }    
  14. if (Company == "") {    
  15. errors += "* Please enter your company name.\n";    
  16. }    
  17. if (Email == "") {    
  18. errors += "* Please enter your email address.\n";    
  19. }    
  20. if (errors.length) {    
  21. alert('One or more errors occurred:\n\n' + errors);    
  22. return false;    
  23. }    
  24. }    
  25. </script>  
Step 3. Run the page and check it. The validations will show like a validation summary of ASP.NET control.