How to disable and enable Div element?

Question

0.00/5 (No votes)

See more:

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 20-Sep-13 1:11am

mn.sathish

Updated 5-Dec-13 1:32am

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Rakesh Meel · Answer 1 · 2013-09-20T01:31:00

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]);
                    }
                }
            }
        }
    }
}

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Answer 2 · 2013-09-20T02:39:00

Solution 2

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.

Posted 20-Sep-13 2:39am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Comments

mn.sathish 23-Oct-13 6:56am

I've tried above but still it does not work for me. . ,

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 24-Oct-13 7:59am

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);

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Dec-13 5:27am

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.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Dec-13 6:02am

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>

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Dec-13 6:12am

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.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Dec-13 7:13am

What type of execution on Client side or Server side?

mn.sathish 4-Dec-13 7:15am

client side

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Dec-13 7:20am

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...,

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Dec-13 7:29am

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.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Dec-13 7:37am

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

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Dec-13 8:19am

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.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Dec-13 11:11am

Okay. No problem. Now, I will try the whole code at my end and try to fix this tomorrow.

I will reply back tomorrow. :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Dec-13 12:26pm

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?

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 5-Dec-13 2:23am

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

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 5-Dec-13 3:10am

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....,

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 5-Dec-13 7:21am

Why? Did you debug?

mn.sathish 5-Dec-13 7:29am

Ya i have done. Wait i will update my full code again.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 5-Dec-13 7:30am

Great. :)

mn.sathish 5-Dec-13 7:33am

Now i update my code. Please check it and tell me what i have to change still....,