Post
Ask Question

Validation Summary Using JavaScript Validation 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.