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
purplesoupAsked:
Who is Participating?
 
StingRaYConnect With a Mentor Commented:
To make it works, try using <tbody> instead of <div>. Hence:

<table>
<tbody 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>
</tbody>
<tbody>
<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>
</tbody>
</table>

Open in new window


And use this to select the validator:

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

Open in new window

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

$('#'+ divId + ' ' + validatorSelector)
0
 
Kiran SonawaneProject LeadCommented:
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
});
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
purplesoupAuthor Commented:
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?
0
 
StingRaYCommented:
$('#'+ 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.
0
 
purplesoupAuthor Commented:
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?
0
 
StingRaYCommented:
Can you show me the sample of your validators? I will show you how to select them.
0
 
purplesoupAuthor Commented:
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

0
 
StingRaYCommented:
Oh! I mean the html code when you view at the page source on your web browser.
0
 
purplesoupAuthor Commented:
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

0
 
StingRaYCommented:
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

0
 
purplesoupAuthor Commented:
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

0
 
StingRaYCommented:
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.
0
 
purplesoupAuthor Commented:
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');
0
 
StingRaYCommented:
Weird. When I moved the div out of the table, it works.
0
 
purplesoupAuthor Commented:
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
0
 
StingRaYCommented:
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.
0
 
purplesoupAuthor Commented:
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.
0
 
StingRaYCommented:
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".
0
 
purplesoupAuthor Commented:
Ah - well done - I think we are there, that's great - thanks for all your help and sticking with it, I appreciate it.
0
 
purplesoupAuthor Commented:
Thanks again
0
 
StingRaYCommented:
You're welcome :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.