[jQuery] IE6 class swapping problem
I am writing some form validation code that works by testing the
validity of the input and swapping the class of the element being
edited depending on whether or not the input is valid. Here's some
example code.
<style type="text/css">
.jqValid {
background-color: #CCFFFF;
}
.jqInvalid {
background-color #CCFFFF;
}
<script type="text/javascript>
$(document).ready (function ()
{
$('input, select').focus (function ()
{
$(this).removeClass ('jqValid');
$(this).removeClass ('jqInvalid');
});
$('input#thisInput').blur (function ()
{
if (this.value="someValue")
{
$(this).addClass ('jqValid');
$(this).removeClass ('jqInvalid');
}
else
{
$(this).removeClass ('jqValid');
$(this).addClass ('jqInvalid');
}
});
});
</script>
This works fine in IE7, Opera 9, Safari 3 and Firefox 1.5, but in IE6
no class change is apparent (the input field soesn't change colour).
If I change the code to explicitly set the background colour with
css() instead of using addClass () and removeClass () the input field
background colour changes as it is meant to, but this means that there
is now presentation in the behaviour layer, which is not good
practice. A page designer would have to delve into the javascript to
change the appearence of the inputs under valid and invalid
conditions.
Is there something I'm missing here? As far as I can tell the code is
correct and it does work on all other test browsers