Click here to Skip to main content
15,309,768 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 1: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]);
                    }
                }
            }
        }
    }
}
   
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.
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.
   
Can you please check the HTML in browser (by viewing the source) to see whether the Validator IDs are "AcqBankListReqFielValid" and "AcqBankReqFielValid"?
mn.sathish 4-Dec-13 6:08am
   
Ya it is showing as i mentioned above.

<input name="txtAcquiringBank" type="text" id="txtAcquiringBank" readonly="readonly" />
<span id="AcqBankReqFielValid" style="color:Red;visibility:hidden;">*</span>
/* For DDL */
<span id="AcqBankListReqFielValid" style="color:Red;visibility:hidden;">*</span>
   
Okay. Here the style visibility is hidden. So, it is not showing and disabled, right?
mn.sathish 4-Dec-13 6:44am
   
But during execution i'm getting respective validator action for respective control.
   
What type of execution on Client side or Server side?
mn.sathish 4-Dec-13 7:15am
   
client side
   
Okay. Do one thing now. Check FireBug console window in FireFox.

Do you see any error after clicking the RadioButtons?
mn.sathish 4-Dec-13 7:22am
   
okay..., Right now i don't have firfox in this system. Shall i check and get back to you...,
   
You can check developer tool of any browser. Check in Chrome or IE if you have and let me know.
mn.sathish 4-Dec-13 7:34am
   
No error. It is working fine. I have checked in IE.
   
Now put a debugger inside the click event and find out whether it is going inside the event or not. To put a debugger, you have write...

debugger;
mn.sathish 4-Dec-13 7:54am
   
Sorry i am not much familiar with Browser Tool.
Do you mean break point. I have put the break point in IE Developer Tool and i have clicked radio button in web age. After that i have clicked start debugging in IE Developer Tool and it highlighted entire block of Jquery code. There is no error thrown in console window
   
Ya that's fine. Just go inside the event by pressing F10 line by line. See what you can find.
mn.sathish 4-Dec-13 11:07am
   
Hi, I had tried as you told that analyze the code line by line. Just it was executed fine without any error.
   
Okay. No problem. Now, I will try the whole code at my end and try to fix this tomorrow.

I will reply back tomorrow. :)
   
I was checking with your code.

I don't have the css files and I am using latest jQuery file from http://code.jquery.com/jquery-latest.min.js.

What I observe is, on radio Button Click, it is Enabling and Disabling the Validators correctly.
If you click on "Our(CORP) Bank ATM" Radio, it disables Aquiring Bank DropDownList (I can see the * hiding).

But after you click on Button, it Posts Back and for that request, it is Disabled. After the Post Back when it reloads, it again gets enabled as before and * appears.

Do you understand now? Or you observer something different?
mn.sathish 5-Dec-13 2:05am
   
Ya i understood but how to overcome this. . ,
We can accomplish this through server side code but i want to done this by Jquery.
Is there any solution for this?
   
If you want to disable this on Page load again, then write the code to disable it in Document ready. Simple.
mn.sathish 5-Dec-13 2:47am
   
Sorry to ask. Plz give me some sample on this
   
Do like below...

$(document).ready(function(){
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);
}
});
mn.sathish 5-Dec-13 7:21am
   
even this too not worked for me....,
   
Why? Did you debug?
mn.sathish 5-Dec-13 7:29am
   
Ya i have done. Wait i will update my full code again.
mn.sathish 5-Dec-13 7:33am
   
Now i update my code. Please check it and tell me what i have to change still....,

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