Blog

Validation summary in JavaScript

Posted by Senthilkumar Blogs | JavaScript Apr 04, 2012
This blog details about 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:
<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>
COMMENT USING
PREMIUM SPONSORS
MCN is your source for developing solutions involving websites, mobile apps, cloud-computing, databases, BI, back-end services and processes and client-server applications.
SPONSORED BY
  • MCN is your source for developing solutions involving websites, mobile apps, cloud-computing, databases, BI, back-end services and processes and client-server applications.