为什么blur绑定了两个元素但是只有一个元素有拼接成功

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-1.11.0.js"></script>
<script>
$(function(){
//为bitian类元素后面添加*
$(".bitian").after("<font>*</font>");

//为bitian元素绑定blur事件
$(".bitian").blur(function(){
var valve = $(this).val();

//清除上次blur事件产生的<span>便签
$(this).parent().find(".bitiantips").remove();

//如果该bitian类元素的id为username
if($(this).is("#username")){
if(valve.length < 6){
$(this).parent().append("<span class='bitiantips fail'>太短了</span>");
}
else{
$(this).parent().append("<span class='bitiantips success'>够长了</span>");
}
}

//如果该bitian类元素的id为usercode
if($(this).is("#usercode")){
if(valve.length < 3){
$(this).parent().append("<span class='bitiantips fail'>太短了</span>");
}
else{
$(this).parent().append("<span class='bitiantips success'>够长了</span>");
}
} 
}).focus(function(){
$(this).triggerHandler("blur");
}).keyup(function(){
$(this).triggerHandler("blur");
});

/* $(".bitian").blur(function(){
}).focus(function(){
$(this).triggerHandler("blur");
}).keyup(function(){
$(this).triggerHandler("blur");
}); */

//上传判断
$("#submit").click(function(){
$("form").submit(function(){
$(".bitian").triggerHandler("focus");
var length = $(".fail").size();
if(length > 0){
return false;
}
return true;
});
});
});

</script>
</head>
<body>
<form action="test.html">
<div><input type="text" id="username" class="bitian"/></div>
<div><input type="password" id="usercode" class="bitian"/></div>
<div><input type="submit" id="submit" value="submit"/></div>
</form> </body>
</html>
运行之后点击 submit我本来想的是密码的input后面应该也有一个不够长的，但是不知道为什么后面没有，想请教一下各位大佬