Click here to Skip to main content
15,849,829 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Please guide me on below, There is no problem with hide and show DIV element, but while click the submit button i'm getting error from "asp:RequiredFieldValidator" for the controls exist in DIV element which i have hide.

ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="IssuerClaimCreationStep1.aspx.cs"
    Inherits="CreateClaim" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head  runat="server">
    <title>Create Claim Step - 01</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <!-- Import CSS Styles -->
    <link rel="Stylesheet" href="Css/SinglePanelStyle.css" type="text/css" />
    <!-- Import JQuery Plugins -->
    <script type="text/jscript" src="jquery/jquery-1.9.1.js"></script>
    <script type="text/jscript" src="jquery/jquery-ui-1.10.3.js"></script>
    <link rel="stylesheet" href="jquery/jquery-ui.css" type="text/css" />
    <!-- Import Hint Plugins -->
    <script type="text/jscript" src="JavaScript/Hint.js"></script>
    <link rel="Stylesheet" href="Css/HintStyle.css" type="text/css" />
    
    <script type="text/javascript">
        $(document).ready(function () {
            $('#radOurBankATM').click(function () {
                /* Hide DDL */
                $('#AcquiringBankListdiv').css("display", "none");
                /* Set Text Box Value */
                $('#txtAcquiringBank').get(0).value = "Corporation Bank";
                $('#AcquiringBankdiv').css("display", "block");  
            });

            $('#radOtherBankATM').click(function () {
                /* Hide Text Box */
                $('#AcquiringBankdiv').css("display", "none");
                $('#AcquiringBankListdiv').css("display", "block");
            });

            if ($("#radOurBankATM").is(":checked")) {
                ValidatorEnable(document.getElementById('AcqBankListReqFielValid'), false);

                ValidatorEnable(document.getElementById('AcqBankReqFielValid'), true);
            }

            if ($("#radOtherBankATM").is(":checked")) {
                ValidatorEnable(document.getElementById('AcqBankListReqFielValid'), true);

                ValidatorEnable(document.getElementById('AcqBankReqFielValid'), false);
            }
        });
    </script>
</head>
<body>
    <form id="CreateClaimForm"  runat="server">
    <div class="wrapper">
        <!-- Middle Page Strats Here -->
        <div class="main content clearfix">
            <center>
                <!-- Sign-in Panel Strats here -->
                <div class="panel">
                    <!-- signin-box starts here -->
                    <div class="panel-box">
                        <div id="IssuingBankdiv" class="DIVOutLayer"  runat="server">
                            <label id="lblUserID" for="Issuing Bank"  runat="server">
                                </label>
                            <div style="white-space: nowrap;">
                                <div style="display: inline;">
                                    <asp:RadioButton ID="radOurBankATM" GroupName="radioATMGroup" Text="Our(CORP) Bank ATM"
                                        runat="server" />
                                </div>
                                <div style="display: inline; margin-removed 10%">
                                    <asp:RadioButton ID="radOtherBankATM" GroupName="radioATMGroup" Text="Other Bank ATM"
                                        runat="server" />
                                </div>
                            </div>
                        </div>
                        <div id="AcquiringBankdiv" class="DIVOutLayer"  runat="server">
                            <label id="lblAcquiringBank" for="AcquiringBank"  runat="server">
                                ^__strong class="PanelLabel">Acquiring Bank
                            </label>
                            <div class="DIVInnerLayer">
                                <input type="text" id="txtAcquiringBank"  runat="server" readonly="readonly" />
                                <span class="hint">You can't edit<span class="hint-pointer"></span></span>
                            </div>
                            <div class="DIVInnerLayer">
                                <asp:RequiredFieldValidator ID="AcqBankReqFielValid" runat="server" ControlToValidate="txtAcquiringBank"
                                    Text="*" ErrorMessage="" ValidationGroup="CreateClaimValidationGroup"></asp:RequiredFieldValidator>
                            </div>
                        </div>
                        <div id="AcquiringBankListdiv" class="DIVOutLayer"  runat="server">
                            <label id="lblAcquiringBankList" for="AcquiringBankList"  runat="server">
                                ^__strong class="PanelLabel">Acquiring Bank
                            </label>
                            <div class="DIVInnerLayer">
                                <select  runat="server" id="ddlAcquiringBankList">
                                    <option value="Acquiring Bank" style="color: Gray;">Please Select Acquiring Bank</option>
                                </select>
                            </div>
                            <div class="DIVInnerLayer">
                                <asp:RequiredFieldValidator ID="AcqBankListReqFielValid" runat="server" ControlToValidate="ddlAcquiringBankList"
                                    Text="*" ErrorMessage="" InitialValue="Acquiring Bank" ValidationGroup="CreateClaimValidationGroup"></asp:RequiredFieldValidator>
                            </div>
                        </div>
                        <div id="CusBranchCodediv" class="DIVOutLayer"  runat="server">
                            <label id="lblCusBranchCode" for="CusBranchCode"  runat="server">
                                ^__strong class="PanelLabel">Customer Branch Code
                            </label>
                            <div class="DIVInnerLayer">
                                <asp:TextBox ID="txtCusBranchCode" runat="server" MaxLength="4"></asp:TextBox>
                                <span class="hint">Only numeric [0-9]. Maximum 4 digits. (Ex : 1,0001,01,001)<span
                                    class="hint-pointer"></span></span>
                            </div>
                            <div class="DIVInnerLayer">
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtCusBranchCode"
                                    Text="*" ErrorMessage="" ValidationGroup="CreateClaimValidationGroup"></asp:RequiredFieldValidator>
                                <asp:CustomValidator ID="CusBranchCodeCusValid" runat="server" Text="*" ErrorMessage="Invalid Customer Branch Code"
                                    ControlToValidate="txtCusBranchCode" ValidationGroup="CreateClaimValidationGroup"
                                    OnServerValidate="CusBranchCodeCusValid_ServerValidate"></asp:CustomValidator>
                            </div>
                        </div>
                        <div class="DIVOutLayer" id="CusBranchNameDiv"  runat="server">
                            <label id="lblCusBranchName" for="CusBranchName"  runat="server">
                                
                            </label>
                            <div class="DIVInnerLayer">
                                <select class="AccountType" id="ddlAccountType"  runat="server">
                                    <option value="A/C Type" style="color: Gray;">A/C Type</option>
                                </select>
                            </div>
                            <div class="DIVInnerLayer">
                                <asp:RequiredFieldValidator ID="AccTypeReqFielValid" runat="server" ControlToValidate="ddlAccountType"
                                    ValidationGroup="CreateClaimValidationGroup" InitialValue="A/C Type" Text="*"
                                    ErrorMessage=""></asp:RequiredFieldValidator>
                            </div>
                            <div class="DIVInnerLayer">
                                <select class="AccountTypeNo" id="ddlAccountTypeNo"  runat="server">
                                    <option value="AccountTypeNo" style="color: Gray;">A/C Type No</option>
                                </select>
                            </div>
                            <div class="DIVInnerLayer">
                                <asp:RequiredFieldValidator ID="AccTypeNoReqFielValid" runat="server" ControlToValidate="ddlAccountTypeNo"
                                    ValidationGroup="CreateClaimValidationGroup" InitialValue="AccountTypeNo" Text="*"
                                    ErrorMessage=""></asp:RequiredFieldValidator>
                            </div>
                            <div class="DIVInnerLayer">
                                <asp:TextBox ID="txtAccountNo" runat="server" MaxLength="6" Style="margin-left: 2%;
                                    width: 24.1%;"></asp:TextBox>
                                <span class="hint">Maximum 6 digits. (Ex : 67,067,0067,00067,000067)<span class="hint-pointer"></span></span>
                            </div>
                            <div class="DIVInnerLayer">
                                <asp:RequiredFieldValidator ID="AccNoReqFielValid" runat="server" ControlToValidate="txtAccountNo"
                                    ValidationGroup="CreateClaimValidationGroup" Text="*" ErrorMessage=""></asp:RequiredFieldValidator>
                                <asp:CustomValidator ID="AccNoCusValid" runat="server" Text="*" ErrorMessage="Invalid Account No"
                                    ControlToValidate="txtAccountNo" ValidationGroup="CreateClaimValidationGroup"
                                    OnServerValidate="AccNoCusValid_ServerValidate"></asp:CustomValidator>
                            </div>
                        </div>
                    </div>
                    <!-- signin-box ends here -->
                    <!-- ************************************************************* -->
                    <!-- Error Message Strats Here -->
                    <div class="errormsg" id="ErrorMsg">
                        <br />
                        <label id="lblErrorMsg" for="ErrorMsg"  runat="server">
                            ^__strong>* Error Msg
                        </label>
                    </div>
                    <div class="errormsg" id="LoginValidSummary-div">
                        <asp:ValidationSummary ID="LoginValidSummary" runat="server" HeaderText="* Indicates mandatory"
                            ValidationGroup="CreateClaimValidationGroup" DisplayMode="List" />
                    </div>
                    <div class="errormsg" id="ExceptionMsg-div">
                        <label id="lblExceptionMsg" for="ExceptionMsg"  runat="server">
                            ^__strong>* An error has occurred. Please check the log files
                        </label>
                    </div>
                    <!-- Error Message Ends Here -->
                    <!-- ************************************************************* -->
                    <div>
                        <center>
                            <asp:Button ID="btnNext" Text="Next" runat="server" 
                                ValidationGroup="CreateClaimValidationGroup" onclick="btnNext_Click" />
                        </center>
                    </div>
                </div>
                <!-- Sign-in Panel Ends here -->
            </center>
        </div>
        <!-- Middle Page Ends Here -->
    </div>
    </form>
</body>
</html>
Posted
Updated 5-Dec-13 2:32am
v2

This May Help you...

C#
//Enables/disables all validator with given control as control to validate
function EnableDisableValidator(control, flag) {
    if (control.id != undefined) {
        if ("undefined" != typeof Page_Validators) {
            for (i = 0; i <= Page_Validators.length; i++) {
                if (Page_Validators[i] != undefined) {
                    if (control.id == Page_Validators[i].controltovalidate) {
                        Page_Validators[i].enabled = flag;
                        Page_Validators[i].isvalid = true;
                        ValidatorUpdateDisplay(Page_Validators[i]);
                    }
                }
            }
        }
    }
}
 
Share this answer
 
Solution

So, while hiding the div, you need to disable the Validators present inside that div. Otherwise, the Validators will not allow you to do any task.

There is a javaScript method ValidatorEnable(val, enable), which I always use.

Refer - ASP.NET Validation in Depth-> Client-Side Validation[^].
You will find the documentation of this method.


Example

Let's consider one div, which you are hiding in you code, that is AcquiringBankListDiv.

Inside this div, you have RequiredFieldValidator Validator AcqBankListReqFielValid.

So, your code will be modified as below.
JavaScript
$('#radOurBankATM').focus(function()
{
    $('#AcquiringBankListDiv').hide();
    $('#AcquiringBankListDiv').css("display", "none");

    // Disable the Validator.
    ValidatorEnable(document.getElementById('AcqBankListReqFielValid'), false);
    
    $('#txtAcquiringBank').val('Corporation Bank');
    $('#fake_txtAcquiringBank').hide();
    $('#txtAcquiringBank').show();
    
    $('#AcquiringBankDiv').show();
    $('#AcquiringBankDiv').css("display", "block");
});



Note

Don't forget to Enable the Validators, whenever necessary (while showing the divs), like below.
JavaScript
// Enable the Validator.
ValidatorEnable(document.getElementById('AcqBankListReqFielValid'), true);

So, modify your code accordingly for all the divs and their respective Validators.
 
Share this answer
 
Comments
mn.sathish 23-Oct-13 6:56am    
I've tried above but still it does not work for me. . ,
What is the problem now?
mn.sathish 4-Dec-13 4:25am    
Still validator are active. I've modified the code as you denoted.

/* Disable the Validator. */
ValidatorEnable(document.getElementById('AcqBankListReqFielValid'), false);
/* Enable the Validator. */
ValidatorEnable(document.getElementById('AcqBankReqFielValid'), true);
You are Disabling and then again Enabling it as per these two lines.
mn.sathish 4-Dec-13 5:33am    
Both are not same. Different validator. I have 2 radio button if user clicks 1st radio button then i will show text box and hide drop down list. If user clicks 2nd radio button then i will show drop down list and hide text box.

<script type="text/javascript">
$(document).ready(function () {
$('#radOurBankATM').click(function () {
/* Hide DDL */
$('#AcquiringBankListdiv').css("display", "none");
/* Set Text Box Value */
$('#txtAcquiringBank').get(0).value = "Corporation Bank";
$('#AcquiringBankdiv').css("display", "block");
/* Disable the Validator. */
ValidatorEnable(document.getElementById('AcqBankListReqFielValid'), false);
/* Enable the Validator. */
ValidatorEnable(document.getElementById('AcqBankReqFielValid'), true);
});

$('#radOtherBankATM').click(function () {
/* Hide Text Box */
$('#AcquiringBankdiv').css("display", "none");
$('#AcquiringBankListdiv').css("display", "block");

/* Enable the Validator. */
ValidatorEnable(document.getElementById('AcqBankListReqFielValid'), true);
/* Disable the Validator. */
ValidatorEnable(document.getElementById('AcqBankReqFielValid'), false);
});
});
</script>

I want to disable validator for respective input which is hide.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900