Validation for TextBox in accordion pane using jQuery in ASP.Net

Last Reply one year ago By AnandM

Posted one year ago

I need help to validate textboxes and controls with javascript in accordion panes and also focus on error is in which control

 <div id="accordion">
        <%--//////////////////////////////////////////////////////////////1//////////////////////////////////////////////////--%>
        <h3>1. Personal details
        </h3>
        <div>
            <table width="100%" class="border ">
                <tr>
                    <td class="border italics" width="450px">Name
                    </td>
                    <td class="border italics">
                        <asp:TextBox ID="txtEmployeeName" runat="server" Width="750px"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="border italics" width="450px">Position and role in firm
                    </td>
                    <td class="border italics">
                        <asp:TextBox ID="txtEmployeePosition" runat="server" Width="750px"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="border italics" width="450px">Lotus Notes address
                    </td>
                    <td class="border italics">
                        <asp:TextBox ID="txtlnAdd" runat="server" Width="750px"></asp:TextBox>
                    </td>
                </tr>
                
                <tr>
                    <td class="border italics" width="450px">Engagement Office
                    </td>
                    <td class="border italics">
                        <asp:TextBox ID="txtEngagementOffice" runat="server" Width="750px"></asp:TextBox>
                    </td>
                </tr>
            </table>
        </div>

 

Posted one year ago

Hi makaish333,

I have created a sample which full fill your requirement

HTML

<asp:ScriptManager runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div id="accordion">
            <%--//////////////////////////////////////////////////////////////1//////////////////////////////////////////////////--%>
            <h3>
                1. Personal details
            </h3>
            <div>
                <table class="border ">
                    <tr>
                        <td class="border italics">
                            Name
                        </td>
                        <td class="border italics">
                            <asp:TextBox ID="txtEmployeeName" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td class="border italics">
                            Position and role in firm
                        </td>
                        <td class="border italics">
                            <asp:TextBox ID="txtEmployeePosition" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td class="border italics">
                            Lotus Notes address
                        </td>
                        <td class="border italics">
                            <asp:TextBox ID="txtlnAdd" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td class="border italics">
                            Engagement Office
                        </td>
                        <td class="border italics">
                            <asp:TextBox ID="txtEngagementOffice" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnSubmit" Text="Submit" runat="server" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {
        $("#accordion").accordion();
        $('[id*=btnSubmit]').on('click', function () {
            var table = $('[id*=accordion] TABLE');
            var txtEmployeeName = table.find('[id*=txtEmployeeName]').val();
            var txtEmployeePosition = table.find('[id*=txtEmployeePosition]').val();
            var txtlnAdd = table.find('[id*=txtlnAdd]').val();
            var txtEngagementOffice = table.find('[id*=txtEngagementOffice]').val();
            var message = "";
            if (txtEmployeeName == "") {
                message += 'Please Enter EmployeeName' + '\n';
            }
            if (txtEmployeePosition == "") {
                message += 'Please Enter EmployeePosition' + '\n';
            }
            if (txtlnAdd == "") {
                message += 'Please Enter Address' + '\n';
            }
            if (txtEngagementOffice == "") {
                message += 'Please Enter EngagementOffice';
            }
            if (message != "") {
                alert(message);
            }
        });
    });
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                $("#accordion").accordion();
            }
        });
    };
</script>

ScreenShot

Hope this works for you

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html