Blog

Validation summary in JavaScript

By Senthilkumar Apr 04 2012
This blog details about how to use the validation summary.
    • Like
    • Love It
    • Awesome
    • Interesting
    • It's Okay
    • Thumbs Down
  • 11.4k
  • 0
Here there are four text box controls. Assume all the fields are mandatory and it will show the validation summary.

Design:
<table cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td>
                    Name:
                </td>
                <td>
                    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Address:
                </td>
                <td>
                    <asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    City:
                </td>
                <td>
                    <asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    State:
                </td>
                <td>
                    <asp:TextBox ID="txtState" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="btnSubmit" runat="server" OnClientClick="return ValidateControls();" Text="Submit" />
                </td>
                <td>
                    <asp:Button ID="btnReset" runat="server" Text="Reset" />
                </td>
            </tr>
        </table>


Java Script:

 <script type="text/javascript">
    function ValidateControls()
    {
        var txt = "Required to fill the following field(s)";
        var opt = 0;
        
        if(document.getElementById('<%=txtName.ClientID %>'))
        {
            if(document.getElementById('<%=txtName.ClientID %>').value == "")
            {
                txt += "\n - Name";
                var opt = 1;
            }
        }
        
        if(document.getElementById('<%=txtAddress.ClientID %>'))
        {
            if(document.getElementById('<%=txtAddress.ClientID %>').value == "")
            {
                txt += "\n - Address";
                var opt = 1;
            }
        }
        
        if(document.getElementById('<%=txtCity.ClientID %>'))
        {
            if(document.getElementById('<%=txtCity.ClientID %>').value == "")
            {
                txt += "\n - City";
                var opt = 1;
            }
        }
        
        if(document.getElementById('<%=txtState.ClientID %>'))
        {
            if(document.getElementById('<%=txtState.ClientID %>').value == "")
            {
                txt += "\n - State";
                var opt = 1;
            }
        }
        
        if(opt == "1")
        {
            alert(txt);
            return false;
        }
        
        return true;
    }
    
    </script>