I'm trying to make a javascript function that will take a declared variable and then put it into a function but as soon as the page loads it adds the class to the field and does not remove it when the field is longer than 4 characters. Can't quite figure it out and would appreciate any input.

Here is the CSS:
Code:
<style type="text/css">
.err {
	background: #f8dbdb;
	border-color: #e77776;
}
</style>
Here is the Javascript:
Code:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var test = $("#test");


test.keyup(valYN(test));
test.blur(valYN(test));


function valYN(i) {
	alert(i.val());
	if (i.val().length < 4) {
		i.addClass("err");
	}
	else {
		i.removeClass("err");
	}
}

});
</script>
And the tidbit of HTML:
Code:
<form>
<input type="text" name="test" id="test" />
</form>
Thank you all for any potential input you may have.