javascript

jquery.validate自定义验证--成功提示与择要提示

  1. 自定义验证–成功提示

1） 添加选项

1
2
3
4
5
6
7
8
9
10
11
12
errorClass: "unchecked"，  
validClass: "checked"，  
errorElement: "span"，  
errorPlacement: function （error， element） {  
    if （element.parent（）.find（"span[for=""" + element.attr（"id"） + """]"） != null） {  
        element.parent（）.find（"span[for=""" + element.attr（"id"） + """]"）.remove（）;  
    }  
    error.appendTo（element.parent（））;  
}，  
success: function （label） {  
    label.removeClass（"unchecked"）.addClass（"checked"）;  
}，

2）设置样式

1
2
3
4
5
6
7
8
9
10
11
input.unchecked{border: 1px ＃E6594E dotted;}  
span.checked {  
  padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;  
  height: 25px;line-height: 1px;font-size: 12px;aborder: 1px solid ＃E6594E;white-space: nowrap;  
  text-align: left;color: ＃E6594E;background:url（"/Common/Sys/Cfg/images/checked.gif"） no-repeat 3px;/* ＃FCEAE8 */  
}  
span.unchecked {  
  padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;  
  height: 25px;line-height: 1px;font-size: 12px;border: 1px solid ＃E6594E;white-space: nowrap;  
  text-align: left;color: ＃E6594E;background: ＃FCEAE8 url（"/Common/Sys/Cfg/images/unchecked.gif"） no-repeat 3px;            
}
  1. 自定义验证–择要提示

1） 添加选项

1
2
3
4
5
6
errorContainer: container，  
errorLabelContainer: $（"ul"， container），  
wrapper: ""li""，  
meta: "validate"，  
errorClass: "unchecked"，  
validClass: "checked"，

2） 设置样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
input.unchecked{border: 1px ＃E6594E dotted;}  
span.checked {  
  padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;  
  height: 25px;line-height: 1px;font-size: 12px;aborder: 1px solid ＃E6594E;white-space: nowrap;  
  text-align: left;color: ＃E6594E;background:url（"/Common/Sys/Cfg/images/checked.gif"） no-repeat 3px;/* ＃FCEAE8 */  
}  
span.unchecked {  
  padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;  
  height: 25px;line-height: 1px;font-size: 12px;border: 1px solid ＃E6594E;white-space: nowrap;  
  text-align: left;color: ＃E6594E;background: ＃FCEAE8 url（"/Common/Sys/Cfg/images/unchecked.gif"） no-repeat 3px;            
}  
div.container {  
    background-color: ＃eee;  
    border: 1px solid red;  
    margin: 5px;  
    padding: 5px;  
}  
div.container ol li {  
    list-style-type: disc;  
    margin-left: 20px;  
}  
div.container { display: none }  
.container label.error {  
    display: inline;  
}

3） 添加择要标识表记标帜

1
2
3
4
<div class="container">  
    <h4>There are serious errors in your form submission， please see below for details.</h4>  
    <ul></ul>  
</div>