如何在所需输入字段下方显示带有错误消息的未检查图像，以及ok!在所需输入字段标签旁边显示成功检查图像 - 不在其自身的输入字段内。
这是我正在做的几乎是正确的，这是让我发疯的部分：在 CSS 样式中，我尝试使用display: block;inem.error并没有得到我期望的结果，我觉得这是正确的方法正在做。但是，我将其display: block;移入了em.valid，它可以工作，但只是为了使结果处于触发器状态，而不是checked image and Ok!输入字段下方；和unchecked image with error message输入字段旁边的。这与我想要得到的完全相反。
你能看看我的代码，看看我做错了什么吗？我希望它能够与在右侧或输入字段旁边使用的行为一起display: block;工作。谢谢你。下面是我的 HTML 页面：em.errorchecked image and Ok!
<!doctype html>
<html lang="en" >
<head>
<title>Test HTML5</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" charset="utf-8"></script>
<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<style type="text/css">
input:focus { border: 1px dotted black; }
input.error { border: 1px dotted red; }
em.error {
margin-left: 3px;
padding-left: 18px;
background: url("images/global/unchecked.gif") no-repeat;
color: red;
}
em.valid {
margin-left: 5px;
padding-left: 18px;
background: url("images/global/checked.gif") no-repeat;
display: block;
color: green;
}
</style>
</head>
<body>
<div id="header"><!-- start header -->
<div class="container"><!-- start container -->
<div class="logoName"><h1><span></span><a rel="home" href="/" ></a></h1></div>
</div><!-- end container -->
</div><!-- end header -->
<div class="container"> <!-- start container -->
<div id="content" ><!-- start content -->
<div id="headline"><h2>Demo Form Val</h2></div>
<div id="CrAcct">
<form id="newUser" class="cmxform" name="newUser" method="post" action="#" >
<fieldset><legend>Create Account</legend>
<div class="clr-470">
<div class="l"><label for="userName">User Name * </label> </div>
<div class="r"><input type="text" id="userName" name="userName" autofocus /></div>
</div>
<div class="clr-470">
<div class="l"><label for="userEmal">E-mail * </label></div>
<div class="r"><input type="email" id="email" title="i.e. bob@mymail.com" class="email required" /></div>
</div>
<div class="clr-470">
<div class="l"><label for="password1">Password * </label></div>
<div class="r"><input type="password" id="password1" name="password1" class="password1" /></div>
</div>
<div class="clr-470">
<div class="l"><label for="password2">Confirm Password * </label></div>
<div class="r"><input type="password" id="password2" name="password2" class="password2 required" /></div>
</div>
<div class="clr-470">
<div class="l"><label for="blank"> </label></div>
<div class="r"><input type="button" id="button" title="return to home" value="Cancel" onclick="location.href='index.html'" />
<input type="submit" id="submit" name="submit" value="Continue" class="submit" /></div>
</div>
<div class="clr-470"><hr></div>
</fieldset>
</form>
</div>
</div><!-- end content -->
</div> <!-- end container -->
<script>
$(document).ready(function(){
$("#newUser").validate({
debug: true,
errorElement: "em",
rules: {
userName: {
required: true,
minlength: 5,
maxlength: 10
},
password1: {
required: true,
minlength: 5,
maxlength: 10
},
password2: {
equalTo: '#password1'
}
},
success: function(label) {
label.addClass("valid").text('Ok!');
},
submitHandler: function(form) {
alert("submitted!");
}
});
})
</script>
<div id="footer"><br /><!-- start footer -->
<p>Copyright © 2006 - 2012. All rights reserved.</p>
</div><!-- end footer -->
</body>
</html>