Ticket #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: | ||
| Blocking: | Blocked by: |
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
comment:2 Changed 6 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 6 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:5 Changed 6 years ago by joern
- Status changed from closed to reopened
- Resolution fixed deleted
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 6 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.
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
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).