jquery validation, highlighting does not work as intended

Question

Hi, I'm trying to validate a very simple form with the jquery validate plug-in. It does seem to work fine with Firefox but the form is intended for the iPhone and there it behaves odd. So I assume I'm doing something wrong (I'm using the UiUIKit as a basis). What I try to achieve is to only put class="error" to the input's parent li and remove it when it validates. Ideally I would also be able to add class="valid" when it validates but I didn't succeed.

JavaScript

    <script type="text/javascript">
    function clickclear(thisfield, defaulttext) {
    if (thisfield.value == defaulttext) {
            thisfield.value = "";
    }
    }
    function clickrecall(thisfield, defaulttext) {
    if (thisfield.value == "") {
            thisfield.value = defaulttext;
    }
    }

$(document).ready(function() {
    var validator = $("#picform").validate({
        rules: {
            customer: "required",
            imageno: {
                remote: "image_check.php"
            },
            email: {
                required: true,
                email: true
            },
        },
        errorElement: "li",
        errorPlacement: function(error,element) {
            element.parent().addClass("error");
            return true;
        },
        highlight: function(element) {
            $(element).parent().addClass("error");
        },
        unhighlight: function(element) {
            $(element).parent().removeClass("error");
        }
    });
});
</script>

HTML

<form id="picform" name="picform" action="funky.php" autocomplete="off" method="post">
<h1>Header</h1>
<ul class="form">
<li><input type="email" name="email" value="E-Mail" id="email" onclick="clickclear(this, 'E-Mail')" onblur="clickrecall(this,'E-Mail')"  /></li>
<li><input type="text" name="customer" value="Kundenname" id="customer" onclick="clickclear(this, 'Kundenname')" onblur="clickrecall(this,'Kundenname')"  /></li>
<li><input type="number" name="imageno" value="Bildnummer" id="imageno" onclick="clickclear(this, 'Bildnummer')" onblur="clickrecall(this,'Bildnummer')"  /></li>
<li><textarea id="comment" name="comment" onclick="clickclear(this, 'Kommentar')" onblur="clickrecall(this,'Kommentar')">Kommentar</textarea></li>
<button name="submit" type="submit">Go</button>
</ul>
</form>

CSS

ul.form li.error { border: 2px solid red; }         
ul.form li.error + li.error { border-top: 0; }