Bug Tracker

#1231 closed bug (fixed)

Opened May 21, 2007 09:11PM UTC

Closed June 29, 2007 10:07PM UTC

jQuery 1.1.3 testbuild breaks latest validation plugin in IE6

Reported by: joern Owned by:
Priority: major Milestone: 1.1.3
Component: core Version: 1.1.2
Keywords: Cc:
Blocked by: Blocking:
Description

An update from 1.1.2 to the latest revision in SVN breaks a lot of the validation plugin in IE6. The testsuite should be quite helpful tracking down the issues:

http://jquery.bassistance.de/validate-113/demo-test/test.html

Plugin in svn:

http://jqueryjs.googlecode.com/svn/trunk/plugins/validate

A diff is not very useful due to the tons of changes since 1.1.2. I'll try to track down specific problems and report them here.

Attachments (0)
Change History (7)

Changed May 21, 2007 10:09PM UTC by joern comment:1

I still have no real idea whats going wrong. At least I figured out that the testsuite outputs a slight different (not any better result) when messing with the required-validation-method (around line 828 of jquery.validate.js in svn).

Changed May 22, 2007 02:18PM UTC by DanSwitzer2 comment:2

Jörn,

After some testing, it looks like the problem may lie in the context selectors. Most of the errors being thrown in IE seems to be in the getLength function around the statement:

if( /radio|checkbox/i.test(element.type) )

return jQuery(element.form || document).find('[@name="' + element.name + '"]:checked').length;

I tried changing the line to:

if( /radio|checkbox/i.test(element.type) )

return jQuery('[@name="' + element.name + '"]:checked', element.form || document).length;

And jQuery still doesn't find any matches. However, if I change the line to:

if( /radio|checkbox/i.test(element.type) )

return jQuery('[@name="' + element.name + '"]:checked').length;

All of the sudden it starts finding matches. This makes me think there's an issue in jQuery's selector code.

Changed May 22, 2007 04:31PM UTC by DanSwitzer2 comment:3

If you run the following code, I think it illustrates the problem:

<html>
<head>
	<title>jQuery - Field Problem</title>
	<script type="text/javascript" src="./lib/jquery-1.1.3a.js"></script>
	<script type="text/javascript">
	$(document).ready(
		function (){
			var aTest = [
				'$("#radio1", $("#frmExample"))'
				, '$("#radio1", document.getElementById("frmExample"))'
				, '$("#radio1")'
				, '$("#radio1", document.frmExample)'
				, '$("#frmExample").find("#radio1")'
				, '$(document.getElementById("frmExample")).find("#radio1")'
				, '$(document.frmExample).find("#radio1")'
				, '$("#radio1", $("#frmExample")[0])'
				, '$($("#frmExample")[0]).find("#radio1")'
				, '$(document.getElementById("debug"))'
			];

			var oDebug = $("#debug");

			for( var i=0; i < aTest.length; i++ ){
				oDebug.append(
					$("<div>").html(aTest[i] + ".length = " + eval(aTest[i]).length)
				);
			}

		}
	);
	</script>
</head>
<body>

<h3>
	All of the below selector should return 1 element.
</h3>

<div id="debug"></div>

<form id="frmExample" action="formaction">
	<input type="text" name="action" value="Test" id="text1"/>
	<input type="text" name="text2" value="T" id="text2"/>
	<input type="text" name="text2" value="TestTestTest" id="text3"/>

	<input type="text" name="action" value="0" id="value1"/>
	<input type="text" name="text2" value="10" id="value2"/>
	<input type="text" name="text2" value="1000" id="value3"/>

	<input type="radio" name="radio1" id="radio1"/>
	<input type="radio" name="radio2" id="radio2" checked="checked"/>
	<input type="radio" name="radio" id="radio3"/>
	<input type="radio" name="radio" id="radio4" checked="checked"/>

	<input type="checkbox" name="check" id="check1" checked="checked"/>
	<input type="checkbox" name="check" />

	<input type="checkbox" name="check2" id="check2"/>

	<input type="checkbox" name="check3" id="check3" checked="checked"/>
	<input type="checkbox" name="check3" checked="checked"/>
	<input type="checkbox" name="check3" checked="checked"/>
	<input type="checkbox" name="check3" checked="checked"/>
	<input type="checkbox" name="check3" checked="checked"/>

	<input type="hidden" name="hidden" id="hidden1"/>
	<input type="text" style="display:none;" name="foo[bar]" id="hidden2"/>

	<input type="text" readonly="readonly" id="name" name="name" value="name" />

	<button name="button">Button</button>

	<textarea id="area1">foobar</textarea>


	<textarea id="area2"></textarea>

	<select name="select1" id="select1">
		<option id="option1a" value="">Nothing</option>
		<option id="option1b" value="1">1</option>
		<option id="option1c" value="2">2</option>
		<option id="option1d" value="3">3</option>
	</select>
	<select name="select2" id="select2">
		<option id="option2a" value="">Nothing</option>
		<option id="option2b" value="1">1</option>
		<option id="option2c" value="2">2</option>
		<option id="option2d" selected="selected" value="3">3</option>
	</select>
	<select name="select3" id="select3" multiple="multiple">
		<option id="option3a" value="">Nothing</option>
		<option id="option3b" selected="selected" value="1">1</option>
		<option id="option3c" selected="selected" value="2">2</option>
		<option id="option3d" value="3">3</option>
	</select>
	<select name="select4" id="select4" multiple="multiple">
		<option id="option3b" selected="selected" value="1">1</option>
		<option id="option3c" selected="selected" value="2">2</option>
		<option id="option3d" selected="selected" value="3">3</option>
		<option id="option3e" selected="selected" value="4">4</option>
		<option id="option3f" selected="selected" value="5">5</option>
	</select>
	<select name="select5" id="select5" multiple="multiple">
		<option id="option3a" value="0">0</option>
		<option id="option3b" value="1">1</option>
		<option id="option3c" value="2">2</option>
		<option id="option3d" value="3">3</option>
	</select>
</form>

</body>
</html>

When you pass in a form element that's retrieved by the document.getElementById() method, jQuery does not properly convert that to a jQuery object. Referencing the element by using other DOM methods works as expected.

Changed May 23, 2007 12:52PM UTC by brandon comment:4

resolution: → fixed
status: new → closed

This was the result of Rev [1892] which was rolled back in Rev [1961]

Changed May 23, 2007 08:45PM UTC by joern comment:5

resolution: fixed
status: closed → reopened

Thanks Brandon, that fixed most issues I had with 1.1.3 and the validation plugin. But there is one quirk left, something else that worked fine with jQuery 1.1.2. A testpage is here: http://jquery.bassistance.de/validate-113/demo-test/test.html

Changed June 14, 2007 10:08AM UTC by joern comment:6

Ok, the actual problem occurs in line 103 of the metadata plugin. I got there by removing the try-catch-block inside testrunner.js' test-function (around callback()) and using Microsofts Script Debugger. Adding "var el = this" before the line that causes the error shows that "this" points to a DOM element without any (interesting) properties set. It has a ownerDocument (the testsuite page) but no parentnode etc. The callstack contains jQuery.clean, I guess thats where the regression occured, because that method got a lot of attention in 1.1.3.

Changed June 29, 2007 10:07PM UTC by brandon comment:7

resolution: → fixed
status: reopened → closed

It was with the clean method and it is now fixed in Rev [2192].