I have an ASP.NET page and I am trying to quickly match the validation controls that are tied to a particular textbox (text input) using a jQuery selector. The validation controls render as a span and the "controltovalidate" property renders as an expando property. Here is a test example:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
<asp:Button ID="Button1" runat="server" Text="Button" /></div>
<input type="button" value="Test" onclick="ml_test();" />
<script type="text/javascript">
ml_test = function() {
alert($('[controltovalidate=TextBox1]').get().length);
};
</script>
</form>
</body>
</html>
Renders as:
(code removed here)
<input name="TextBox1" type="text" id="TextBox1" />
<span id="RequiredFieldValidator1" style="color:Red;visibility:hidden;">RequiredFieldValidator</span>
<span id="RegularExpressionValidator1"></span>
<input type="submit" name="Button1" value="Button" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("Button1", "", true, "", "", false, false))" id="Button1" /></div>
<input type="button" value="Test" onclick="ml_test();" />
<script type="text/javascript">
ml_test = function() {
alert($('[controltovalidate=TextBox1]').get().length);
};
</script>
(code removed here)
<script type="text/javascript">
//<![CDATA[
var RequiredFieldValidator1 = document.all ? document.all["RequiredFieldValidator1"] : document.getElementById("RequiredFieldValidator1");
RequiredFieldValidator1.controltovalidate = "TextBox1";
RequiredFieldValidator1.errormessage = "RequiredFieldValidator";
RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator1.initialvalue = "";
//]]>
</script>
The problem: the ml_test() function shows 1 in Internet Explorer 7 (as expected), but shows 0 in Firefox 3.6.8. I tried adding additional controls, but in Firefox it consistently doesn't work.
I discovered this post that shows the use of an ampersand in the selector like this [@expando=value], but when I try this syntax, jQuery 1.4.2 throws an error.
Is there a cross-browser way to select expando attributes, and if so, what is the proper syntax?
You can use .filter() like this:
ml_test = function() {
alert($('span').filter(function() { return this.controltovalidate=='TextBox1'; }).length);
};
You can test it here, or make it a custom selector, like this:
jQuery.expr[':'].validatorFor = function(o, i, m){
return o.controltovalidate === m[3];
};
And call it like this:
ml_test = function() {
alert($('span:validatorFor(TextBox1)').length);
};