如何编写js以便jquery验证插件的响应放在表单字段框中?
html表单如下:
<form class="cmxform" id="commentForm" method="POST" action="">
<p>
<label for="cname">Name</label>
<input id="cname" type="text" name="name" size="60" class="required" minlength="2" />
</p>
<p>
<label for="cemail">E-Mail</label>
<input id="cemail" type="text" name="email" size="60" class="required email" />
</p>
<p>
<label for="curl">URL</label>
<input id="curl" type="text" name="url" size="60" class="url" value="" />
</p>
<p>
<label for="ccomment">Your comment</label>
<textarea id="ccomment" type="text" name="comment" cols="72" rows="8" class="required"></textarea>
</p>
<p>
<div id="button2"><input class="submit" id="submit_btn" type="submit" value="Send Email"/></div>
</p>
</form>
js目前看起来像这样:
<script>
$(document).ready(function() {
$('#commentForm').validate({
submitHandler: function(form) {
$.ajax({
type: 'POST',
url: 'process.php',
data: $(this).serialize(),
success: function(returnedData) {
$('#commentForm').append(returnedData);
}
});
return false;
}
});
});
</script>
什么是正确的js将errorPlacement放在表单字段的输入值中?因此,如果有人没有包含他们的电子邮件,则响应“此字段是必需的”将显示在电子邮件的输入值内。目前,它在输入后返回。谢谢。
答案 0 :(得分:1)
验证提供选项errorPlacement
,这是一个完全符合此目的的函数。
我使用jQuery UI的position
实用程序快速编写了这个(所以你必须包含jQuery UI才能使我的版本工作):
//in your $.validate options, add this
errorPlacement: function(error, element) {
error.insertAfter( element).position({
my:'right top',
at:'right top',
of:element
});
}
注意我也定义了这个CSS:
label.error { color: red; position:absolute; }
在此处查看此行动:http://jsfiddle.net/ryleyb/Z64Tv/