Bug Tracker

Opened 13 years ago

Closed 13 years ago

#1231 closed bug (fixed)

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.

Change History (7)

comment:1 Changed 13 years ago by joern

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

comment:2 Changed 13 years ago by DanSwitzer2

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.

comment:3 Changed 13 years ago by DanSwitzer2

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.

comment:4 Changed 13 years ago by brandon

Resolution: fixed
Status: newclosed

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

comment:5 Changed 13 years ago by joern

Resolution: fixed
Status: closedreopened

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

comment:6 Changed 13 years ago by joern

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.

comment:7 Changed 13 years ago by brandon

Resolution: fixed
Status: reopenedclosed

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

Note: See TracTickets for help on using tickets.