Post
Ask Question

Validation summary in JavaScript

Validation summary in JavaScript 

 
This blog details how to use the validation summary.
 
Here there are four text box controls. Assume all the fields are mandatory and it will show the validation summary.
 
Design:
  1. <table cellpadding="0" cellspacing="0" border="0" width="100%">  
  2.      <tr>  
  3.           <td>  
  4.                Name:  
  5.           </td>  
  6.           <td>  
  7.                <asp:TextBox ID="txtName" runat="server"></asp:TextBox>  
  8.           </td>  
  9.      </tr>  
  10.      <tr>  
  11.           <td>  
  12.                Address:  
  13.           </td>  
  14.           <td>  
  15.                <asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>  
  16.           </td>  
  17.      </tr>  
  18.      <tr>  
  19.           <td>  
  20.                City:  
  21.           </td>  
  22.           <td>  
  23.                <asp:TextBox ID="txtCity" runat="server"></asp:TextBox>  
  24.           </td>  
  25.      </tr>  
  26.      <tr>  
  27.           <td>  
  28.                State:  
  29.           </td>  
  30.           <td>  
  31.                <asp:TextBox ID="txtState" runat="server"></asp:TextBox>  
  32.           </td>  
  33.      </tr>  
  34.      <tr>  
  35.           <td>  
  36.                <asp:Button ID="btnSubmit" runat="server" OnClientClick="return ValidateControls();" Text="Submit" />  
  37.           </td>  
  38.           <td>  
  39.                <asp:Button ID="btnReset" runat="server" Text="Reset" />  
  40.           </td>  
  41.      </tr>  
  42. </table>  
Java Script:
  1. <script type="text/javascript">  
  2. function ValidateControls()   
  3. {  
  4.      var txt = "Required to fill the following field(s)";  
  5.      var opt = 0;  
  6.   
  7.      if (document.getElementById('<%=txtName.ClientID %>'))   
  8.      {  
  9.           if (document.getElementById('<%=txtName.ClientID %>').value == "")   
  10.           {  
  11.                txt += "\n - Name";  
  12.                var opt = 1;  
  13.           }  
  14.      }  
  15.   
  16.      if (document.getElementById('<%=txtAddress.ClientID %>'))   
  17.      {  
  18.           if (document.getElementById('<%=txtAddress.ClientID %>').value == "")   
  19.           {  
  20.                txt += "\n - Address";  
  21.                var opt = 1;  
  22.           }  
  23.      }  
  24.   
  25.      if (document.getElementById('<%=txtCity.ClientID %>'))   
  26.      {  
  27.           if (document.getElementById('<%=txtCity.ClientID %>').value == "")   
  28.           {  
  29.                txt += "\n - City";  
  30.                var opt = 1;  
  31.           }  
  32.      }  
  33.   
  34.      if (document.getElementById('<%=txtState.ClientID %>'))   
  35.      {  
  36.           if (document.getElementById('<%=txtState.ClientID %>').value == "")   
  37.           {  
  38.                txt += "\n - State";  
  39.                var opt = 1;  
  40.           }  
  41.      }  
  42.   
  43.      if (opt == "1")   
  44.      {  
  45.           alert(txt);  
  46.           return false;  
  47.      }  
  48.   
  49.      return true;  
  50. }  
  51. </script>