asked on

JQuery code to find all the validators within a div

I've got a section of a page I'm hiding and showing, and the validators within the section need to be enabled and disabled, depending on whether it is shown or hidden.

I'm currently accessing the validators by passing the IDs through in a hidden field, but I think I should be able to do it with JQuery - can anyone give me the code to get all the validators within a div?

Note I don't want all the validators on the page, just those that fall within the div.

Thanks

StingRaY

You can access all validators within the div by this code.

$('#'+ divId + ' ' + validatorSelector)

Kiran Sonawane

Look at view source generated for validation control (whether span or div) then change it accordingly

$("#div1 div[id^=your_selector]").each(function(){
// Your code goes here
});

purplesoup

ASKER

StingRaY - what do you mean by validatorSelector ?

sonawanekiran - sorry I'm not following - what am I looking for when I look at the source generated for the validation control - and how do I reference each control in your code - can you show how I would enable or disable the validation?

StingRaY

$('#'+ divId + ' ' + validatorSelector)

Open in new window

the validatorSelector is used to select or not select any control in your form.

For example, if you want to select ALL input under displayed section, you can use this code.

$('#'+ divId + ' div:visible input').each(function(){
// validation ...
});

Open in new window

divId is container of all sections. The code above is selecting ALL input under a visible section under the given container.

purplesoup

ASKER

Hi StingRaY - thanks for explaining, but I'm still not with you. I need to select all validators within my Div - is it possible? Is there a way to identify all validators?

StingRaY

Can you show me the sample of your validators? I will show you how to select them.

purplesoup

ASKER

Sorry, I had missed this reply.

The code is too big to copy the whole thing in, I can given you an example I guess, it is just a mixture of required field validators, regular expression and checking two controls are equal. Why do you need a sample?

For the sake of argument, show me how you would do it for the validators within the div in this code:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="FindValidators._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
    </p>
    <p>
        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
    </p>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
        ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
    <br />
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"  ControlToValidate="TextBox2"
        ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
    <br />
    <asp:CheckBox ID="ControlValidators" runat="server" />
    <div id="ValidateContainer" runat="server" >
        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox3"
        ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
    <br />
        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="TextBox4"
        ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
    <br />
    </div>
    <asp:Button ID="ValidateButton1" runat="server" Text="Button" />
</asp:Content>

Open in new window

StingRaY

Oh! I mean the html code when you view at the page source on your web browser.

purplesoup

ASKER

ok - here you are:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
	Home Page
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form method="post" action="Default.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE3NDg2Nzk1NzhkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYBBSNjdGwwMCRNYWluQ29udGVudCRDb250cm9sVmFsaWRhdG9yc3OxhqYOTmyHN1vgpeO2EYljBWrePCV+s5XKWXW/xXIf" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
    theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>

</script>


<script src="/WebResource.axd?d=STMktD0M7fEsjZjoHQ_6uQmaKgxyVgpIMblWxAE8ispHvCkvy2etdXdJEgqiXHZcKpq2FxHF8w61nbpcJ-Wq8s3CrQkyl5nDioAAsP6s-VI1&amp;t=634568724389128140" type="text/javascript"></script>


<script src="/WebResource.axd?d=X11lrgI2uLmofHSEogMhHgfKxbULR0fGi8XtysZ6Kov5Cwk5oqkp_GRA2re1wE9_H-vrYHJNerfS2UBYsok7GPO5RbW78YqmJnN_Qo6Eu4s1&amp;t=634568724389128140" type="text/javascript"></script>
<script src="/WebResource.axd?d=PxiSdumC3fO3SbP6eq03AEtlJN6L_9oRn_pzftmWTNw6H3N0vmGxkYUKbHG-jR9lul6eZIUvt-WDpl9VxlLSfJtY_YS4xe8K3Ittom0DdM01&amp;t=634568724389128140" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>

<div class="aspNetHidden">

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwK4/ruQCwLR49OXDQLR48eXDQLKlaDDAwLR48uXDQLR47+XDQLwpqjyBoQceovi4qSAlw2rVymXeitNv5dTSRxp+aqlCN8vAUzV" />

</div>
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    My ASP.NET Application
                </h1>
            </div>
            <div class="loginDisplay">
                
                        [ <a href="Account/Login.aspx" id="HeadLoginView_HeadLoginStatus">Log In</a> ]
                    
            </div>

            <div class="clear hideSkiplink">
                <a href="#NavigationMenu_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=hpNQPuFcU3gxtyzz9kPxscxOz3VadQB_812sVxK0ngJavQi9s8rB-C9ONaEdo-Wa0yjAfGH8-vNZApeQjk6QLa8mcBNxYg5OrS22Zsux0to1&amp;t=634568724389128140" width="0" height="0" style="border-width:0px;" /></a><div class="menu" id="NavigationMenu">
	<ul class="level1">
		<li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="About.aspx">About</a></li>
	</ul>
</div><a id="NavigationMenu_SkipLink"></a>
            </div>
        </div>

        <div class="main">
            
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
    </p>
    <p>
        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
    </p>

    <input name="ctl00$MainContent$TextBox1" type="text" id="MainContent_TextBox1" />
    <span id="MainContent_RequiredFieldValidator1" style="visibility:hidden;">RequiredFieldValidator</span>
    <br />
        <input name="ctl00$MainContent$TextBox2" type="text" id="MainContent_TextBox2" />
    <span id="MainContent_RequiredFieldValidator2" style="visibility:hidden;">RequiredFieldValidator</span>
    <br />
    <input id="MainContent_ControlValidators" type="checkbox" name="ctl00$MainContent$ControlValidators" />
    <div id="MainContent_ValidateContainer">

        <input name="ctl00$MainContent$TextBox3" type="text" id="MainContent_TextBox3" />
    <span id="MainContent_RequiredFieldValidator3" style="visibility:hidden;">RequiredFieldValidator</span>
    <br />
        <input name="ctl00$MainContent$TextBox4" type="text" id="MainContent_TextBox4" />
    <span id="MainContent_RequiredFieldValidator4" style="visibility:hidden;">RequiredFieldValidator</span>
    <br />
    </div>
    <input type="submit" name="ctl00$MainContent$ValidateButton1" value="Button" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$ValidateButton1&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="MainContent_ValidateButton1" />

        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">
        
    </div>
    
<script type="text/javascript">
//<![CDATA[
var Page_Validators =  new Array(document.getElementById("MainContent_RequiredFieldValidator1"), document.getElementById("MainContent_RequiredFieldValidator2"), document.getElementById("MainContent_RequiredFieldValidator3"), document.getElementById("MainContent_RequiredFieldValidator4"));
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
var MainContent_RequiredFieldValidator1 = document.all ? document.all["MainContent_RequiredFieldValidator1"] : document.getElementById("MainContent_RequiredFieldValidator1");
MainContent_RequiredFieldValidator1.controltovalidate = "MainContent_TextBox1";
MainContent_RequiredFieldValidator1.errormessage = "RequiredFieldValidator";
MainContent_RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_RequiredFieldValidator1.initialvalue = "";
var MainContent_RequiredFieldValidator2 = document.all ? document.all["MainContent_RequiredFieldValidator2"] : document.getElementById("MainContent_RequiredFieldValidator2");
MainContent_RequiredFieldValidator2.controltovalidate = "MainContent_TextBox2";
MainContent_RequiredFieldValidator2.errormessage = "RequiredFieldValidator";
MainContent_RequiredFieldValidator2.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_RequiredFieldValidator2.initialvalue = "";
var MainContent_RequiredFieldValidator3 = document.all ? document.all["MainContent_RequiredFieldValidator3"] : document.getElementById("MainContent_RequiredFieldValidator3");
MainContent_RequiredFieldValidator3.controltovalidate = "MainContent_TextBox3";
MainContent_RequiredFieldValidator3.errormessage = "RequiredFieldValidator";
MainContent_RequiredFieldValidator3.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_RequiredFieldValidator3.initialvalue = "";
var MainContent_RequiredFieldValidator4 = document.all ? document.all["MainContent_RequiredFieldValidator4"] : document.getElementById("MainContent_RequiredFieldValidator4");
MainContent_RequiredFieldValidator4.controltovalidate = "MainContent_TextBox4";
MainContent_RequiredFieldValidator4.errormessage = "RequiredFieldValidator";
MainContent_RequiredFieldValidator4.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_RequiredFieldValidator4.initialvalue = "";
//]]>
</script>

<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script>
<script type="text/javascript">
//<![CDATA[

var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
    ValidatorOnLoad();
}

function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else {
        return true;
    }
}
        //]]>
</script>
</form>
</body>
</html>

Open in new window

StingRaY

Ok, thank you.

Now, by your code, you have 4 validators residing in 4 spans. They are all hidden.
The names of validators are MainContent_RequiredFieldValidator1, 2, 3 and 4.

To access ALL validators falling IN the div id="MainContent_ValidateContainer" using jQuery, you can use:

// to select all validators within div
$('div#MainContent_ValidateContainer span[id^="MainContent_RequireFieldValidator"]')

// Loop through them
$('div#MainContent_ValidateContainer span[id^="MainContent_RequireFieldValidator"]').each(function(){
    // .... YOUR CODE
});

// to select all shown validators within div
$('div#MainContent_ValidateContainer span[id^="MainContent_RequireFieldValidator"]:visible')

Open in new window

purplesoup

ASKER

Well I've tried getting your code working. I've added a div called MainContent_ValidateContainer and placed some validators within it. I've then tried disabling all the required field validators, or iterating through the validators to get their values. Neither appears to return/do anything.

Note your code refers to "RequireFieldValidator" - I believe it should be "RequiredFieldValidator".

Here is my code, including the full page source.

<!DOCTYPE html>
<html>
<head><title>
	Home Page
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form method="post" action="default.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMjQ3MDk1NzMwZGRfNih+WyxnAvwnNWjpmhYBo2CHLV2vePMV6Xaml2H2Ew==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
    theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>

</script>


<script src="/WebResource.axd?d=STMktD0M7fEsjZjoHQ_6uQmaKgxyVgpIMblWxAE8ispHvCkvy2etdXdJEgqiXHZcKpq2FxHF8w61nbpcJ-Wq8s3CrQkyl5nDioAAsP6s-VI1&amp;t=634568724389128140" type="text/javascript"></script>


<script src="/WebResource.axd?d=X11lrgI2uLmofHSEogMhHgfKxbULR0fGi8XtysZ6Kov5Cwk5oqkp_GRA2re1wE9_H-vrYHJNerfS2UBYsok7GPO5RbW78YqmJnN_Qo6Eu4s1&amp;t=634568724389128140" type="text/javascript"></script>
<script src="/WebResource.axd?d=PxiSdumC3fO3SbP6eq03AEtlJN6L_9oRn_pzftmWTNw6H3N0vmGxkYUKbHG-jR9lul6eZIUvt-WDpl9VxlLSfJtY_YS4xe8K3Ittom0DdM01&amp;t=634568724389128140" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>

<div class="aspNetHidden">

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQKPscapCwLR49OXDQLR48eXDQLR48uXDQLT8MqYCI9zqcNihmTqfYAMl1O8zWqeN8IXX6LmAAgQyBw2OIif" />

</div>
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    My ASP.NET Application
                </h1>
            </div>
            <div class="loginDisplay">
                
                        [ <a href="Account/Login.aspx" id="HeadLoginView_HeadLoginStatus">Log In</a> ]
                    
            </div>

            <div class="clear hideSkiplink">
                <a href="#NavigationMenu_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=hpNQPuFcU3gxtyzz9kPxscxOz3VadQB_812sVxK0ngJavQi9s8rB-C9ONaEdo-Wa0yjAfGH8-vNZApeQjk6QLa8mcBNxYg5OrS22Zsux0to1&amp;t=634568724389128140" width="0" height="0" style="border-width:0px;" /></a><div class="menu" id="NavigationMenu">
	<ul class="level1">
		<li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="About.aspx">About</a></li>
	</ul>
</div><a id="NavigationMenu_SkipLink"></a>
            </div>
        </div>

        <div class="main">
            

<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>

<script language="javascript" type="text/javascript">

    $(document).ready(function () {
        alert("hello");

        $('div#MainContent_ValidateContainer span[id^="MainContent_RequiredFieldValidator"]', 'enabled', 'false');


        $('div#MainContent_ValidateContainer span[id^="MainContent_RequiredFieldValidator"]').each(function (index, value) {
            alert(index + ' : ' + value);
        });

        alert("disabled all");
    });


</script>
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
    </p>

    <p>
        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
    </p>
<table>
<div id="MainContent_ValidateContainer">
<tr>
<td>
<label for="MainContent_TextBox1" id="MainContent_Label1">One</label>
<input name="ctl00$MainContent$TextBox1" type="text" id="MainContent_TextBox1" />
<span id="MainContent_RequiredFieldValidator1" style="visibility:hidden;">RequiredFieldValidator</span>
</td>

</tr>
<tr>
<td>
<label for="MainContent_TextBox2" id="MainContent_Label2">Two</label>
<input name="ctl00$MainContent$TextBox2" type="text" id="MainContent_TextBox2" />
<span id="MainContent_RequiredFieldValidator2" style="visibility:hidden;">RequiredFieldValidator</span>
</td>
</tr>
</div>
<tr>
<td>
<label for="MainContent_TextBox3" id="MainContent_Label3">Three</label>
<input name="ctl00$MainContent$TextBox3" type="text" id="MainContent_TextBox3" />
<span id="MainContent_RequiredFieldValidator3" style="visibility:hidden;">RequiredFieldValidator</span>

</td>
</tr>
</table>
<input type="submit" name="ctl00$MainContent$Button1" value="Save" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$Button1&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="MainContent_Button1" />
<br />
<span id="MainContent_Label4"></span>

        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">

        
    </div>
    
<script type="text/javascript">
//<![CDATA[
var Page_Validators =  new Array(document.getElementById("MainContent_RequiredFieldValidator1"), document.getElementById("MainContent_RequiredFieldValidator2"), document.getElementById("MainContent_RequiredFieldValidator3"));
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
var MainContent_RequiredFieldValidator1 = document.all ? document.all["MainContent_RequiredFieldValidator1"] : document.getElementById("MainContent_RequiredFieldValidator1");
MainContent_RequiredFieldValidator1.controltovalidate = "MainContent_TextBox1";
MainContent_RequiredFieldValidator1.errormessage = "RequiredFieldValidator";
MainContent_RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_RequiredFieldValidator1.initialvalue = "";
var MainContent_RequiredFieldValidator2 = document.all ? document.all["MainContent_RequiredFieldValidator2"] : document.getElementById("MainContent_RequiredFieldValidator2");
MainContent_RequiredFieldValidator2.controltovalidate = "MainContent_TextBox2";
MainContent_RequiredFieldValidator2.errormessage = "RequiredFieldValidator";
MainContent_RequiredFieldValidator2.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_RequiredFieldValidator2.initialvalue = "";
var MainContent_RequiredFieldValidator3 = document.all ? document.all["MainContent_RequiredFieldValidator3"] : document.getElementById("MainContent_RequiredFieldValidator3");
MainContent_RequiredFieldValidator3.controltovalidate = "MainContent_TextBox3";
MainContent_RequiredFieldValidator3.errormessage = "RequiredFieldValidator";
MainContent_RequiredFieldValidator3.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_RequiredFieldValidator3.initialvalue = "";
//]]>
</script>

<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script>
<script type="text/javascript">
//<![CDATA[

var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
    ValidatorOnLoad();
}

function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else {
        return true;
    }
}
        //]]>
</script>
</form>
</body>
</html>

Open in new window

StingRaY

First, your html structure is broken. You place div#MainContent_ValidateContainer inside <table> but place </div> after </table>.

Second, I don't think

$('div#MainContent_ValidateContainer span[id^="MainContent_RequiredFieldValidator"]', 'enabled', 'false');

Open in new window

is correct. Try:

$('div#MainContent_ValidateContainer span[id^="MainContent_RequiredFieldValidator"]').attr('enabled', 'false');

Open in new window

, if you want to add an attribute to your validator.

purplesoup

ASKER

The div starts after the <table> and finishes after the second row - so it just marks off the first two rows of the table.

I made the suggested attr(..) change and it hasn't made any difference, thanks.

$('div#MainContent_ValidateContainer span[id^="MainContent_RequiredFieldValidator"]').attr('enabled', 'false');

StingRaY

Weird. When I moved the div out of the table, it works.

purplesoup

ASKER

Incidentally, removing the div selector part seems to get something working. If I try

$('span[id^="MainContent_RequiredFieldValidator"]').each(function (index, value) {
alert(index + ' : ' + value);
});

it does cause the validators to appear, however neither

$('span[id^="MainContent_RequiredFieldValidator"]','enabled', 'false');

nor

$('span[id^="MainContent_RequiredFieldValidator"]').attr('enabled', 'false');

will disable all the validators

StingRaY

Try this code to enable or disable your validators:

        // disable them ALL
        $('span[id^="MainContent_RequiredFieldValidator"]').attr('enabled', 'false');

        // enable them ALL
        $('span[id^="MainContent_RequiredFieldValidator"]').attr('enabled', 'true');

        // select ALL enabled validators
        $('span[id^="MainContent_RequiredFieldValidator"][enabled!="false"]').each(function (index, value) {
            alert(index + ' : ' + value);
        });

Open in new window

OR to disable any validators via HTML, just put an attribute named enabled like this:

<span id="MainContent_RequiredFieldValidator1" style="visibility:hidden;" enabled="false">RequiredFieldValidator</span>

Open in new window

or remove the attribute to enable it.

purplesoup

ASKER

Well I'm not clear how your suggestion that

$('span[id^="MainContent_RequiredFieldValidator"]').attr('enabled', 'false');

would disable them all was different to my earlier comment that

$('span[id^="MainContent_RequiredFieldValidator"]').attr('enabled', 'false');

hadn't disabled all the validators, however I tried it again but with the same result - the validators still fired on clicking the "save" button.

I also tried

$('span[id^="MainContent_RequiredFieldValidator"][enabled!="false"]').each(function (index, value)

which interestingly did appear to respond based on whether enabled was set or not in the earlier statement, however this didn't actually disable the validators, they still fired on clicking save.

I then tried the following code:

$('span[id^="MainContent_RequiredFieldValidator"][enabled!="false"]').each(function (index, value) {
value.enabled = false;
});

and this did actually work - the validators didn't stop the save button from re-loading the page, so they were successfully disabled.

So for some reason the JQuery enabled attribute isn't doing the same thing as the .enabled property.

Also we still have the problem of selecting a group of validators within a div.

$('div#MainContent_ValidateContainer span[id^="MainContent_RequiredFieldValidator"]').each(function (index, value) {
alert(index + ' : ' + value);
});

still isn't finding anything on the page.

StingRaY

After some experimental, you cannot put <div> inbetween <table> and <tr>.

Try this to see what I mean:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
    $(document).ready(function () {

        alert($('#targetblock td').attr('bgcolor'));
        alert($('td').attr('bgcolor'));
    });
  </script>
</head>
<table>
	<div id="targetblock">
		<tr>
			<td bgcolor="blue">Sample Block</td>
		<tr>
	</div>
	<tr>
		<td bgcolor="green">Another block</td>
	</tr>
</table>

Open in new window

First alert says "undefined", while the second says "blue".

ASKER CERTIFIED SOLUTION

StingRaY

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

purplesoup

ASKER

Ah - well done - I think we are there, that's great - thanks for all your help and sticking with it, I appreciate it.

purplesoup

ASKER

Thanks again

StingRaY

You're welcome :)