jquery验证时错误信息的位置

好长时间没有用jquery.validate.js这个插件了，忘得差不多了。唉，好东西还是要经常拿出来看看的，今天用jquery.validate来做一个小东西，遇到一个问题，就是错误提示信息的位置问题，如果知道的话，很简单。以前遇到过，可是忘了，现在标记一下，将来在忘了，在回过头看看。俗话说的好，好记性不如烂笔头。

举个例子，大家就知道怎么回事了。

1. rules:{
2. name:{
3. required:true,
4. rangelength:[1,20]
5. },
6. validateCode:{
7. required:true,
8. number:true,
9. rangelength:[5,5]
10. }
11. },
12. messages:{
13. name:{
14. required:"请输入命令名",
15. rangelength:jQuery.format("长度请控制在{0}~{1}")
16. },
17. validateCode:{
18. required:"请输入验证码",
19. number:"请输入数字",
20. rangelength:jQuery.format("长度必须是5位")
21. }
22. },
24. success:function(label){
25. label.addClass("errorchecked");
26. },
28. submitHandler:function(form){
29. if($("#RegionId").val()=='0'){
30. $("#citySelect").attr("class","error").html('请选择区域').show();
31. $("#RegionId").attr("class","error");
32. }else{
33. $("#RegionId").attr("class","valid");
34. $("#citySelect").attr("class","valid").html('success').show();
35. form.submit();
36. }
37. }
38. });

在上面的代码中，我并没有添加错误信息存放位置的方法，我们看一下效果

查看 复制 打印 ?

1. <td>
2. <inputtype="text"maxlength="30"value=""id="name"name="name">
3. <labelfor="name"generated="true">请输入命令名</label>//错误信息会自动根在输入框的后面。
4. </td>

如果我们加上错误信息位置的方法errorPlacement来看一下效果是什么样子的。

1. rules:{
2. name:{
3. required:true,
4. rangelength:[1,20]
5. },
6. validateCode:{
7. required:true,
8. number:true,
9. rangelength:[5,5]
10. }
11. },
12. messages:{
13. name:{
14. required:"请输入命令名",
15. rangelength:jQuery.format("长度请控制在{0}~{1}")
16. },
17. validateCode:{
18. required:"请输入验证码",
19. number:"请输入数字",
20. rangelength:jQuery.format("长度必须是5位")
21. }
22. },
23. errorPlacement:function(error,element){//错误信息位置设置方法
24. error.appendTo(element.parent().next());//这里的element是录入数据的对象
25. },
26. success:function(label){
27. label.addClass("errorchecked");
28. },
30. submitHandler:function(form){
31. if($("#RegionId").val()=='0'){
32. $("#citySelect").attr("class","error").html('请选择区域').show();
33. $("#RegionId").attr("class","error");
34. }else{
35. $("#RegionId").attr("class","valid");
36. $("#citySelect").attr("class","valid").html('success').show();
37. form.submit();
38. }
39. }
40. });

来看一下效果

1. <tr>
2. <th><labelfor="name"id="lname"><codetitle="必填">*</code>命令名称</label></th>
3. <td><inputtype="text"maxlength="30"value=""id="name"name="name"></td>
4. <td><labelfor="name"generated="true">请输入命令名</label></td>//错误信息跑到这儿来了，
5. </tr>

够简单吧，在简单的东西，长时间不用也会忘的。