Strange Jquery 1.3 behavior

Today I worked with two elements with same ids but in different forms, and found strange jquery selector engine behavior. Actually I can undrestand that, because by w3c you cant place two elements with same ids on same page.

Description: Two froms with element with same id in both of them, trying to use jquery selector to choose one of them like this $(“#formid #elemid”). Result will be null.

Example:

HTML:

<form id="form1" method="post" action="/">
<input type="text" class="inputtext" id="text1" name="text1" value=""/>
<input type="text" class="inputtext" id="text2" name="text2" value=""/>
<input type="text" class="button" id="btn1" value="press me"/>
</form>

<form id=”form2″ method=”post” action=”/”>
<input type=”text” class=”inputtext” id=”text1″ name=”text1″ value=”"/>
<input type=”text” class=”inputtext” id=”text2″ name=”text3″ value=”"/>
<input type=”text” class=”button” id=”btn2″ value=”press me2″/>
</form>

* This source code was highlighted with Source Code Highlighter.

Javascript:

$('#btn1').click(function() {
if (!$('#form1 #text1').val()) {
$('#form1 #text1').css('border','1px solid red');
}
if (!$('#form1 #text2').val()) {
$('#form1 #text2').css('border','1px solid red');
}
});

$(‘#btn2′).click(function() {
if (!$(‘#form2 #text1′).val()) {
$(‘#form2 #text1′).css(‘border’,’1px solid red’);
}
if (!$(‘#form2 #text2′).val()) {
$(‘#form2 #text4′).css(‘border’,’1px solid red’);
}
});

* This source code was highlighted with Source Code Highlighter.