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

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

1) 添加选项

            errorClass: "unchecked", //"unchecked"/"SummaryItem"
            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)设置样式

 

       input.unchecked
        {
            border: 1px #E6594E dotted;
        }
        span.checked
        {
            padding: 3px 5px 3px 21px;
            margin-left: 10px;
            margin-top: 0px;
            margin-bottom: 3px;
            height: 25px;
            line-height: 1px;
            font-size: 12px;
            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;
            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;
        }

　　

 

2. 自定义验证--摘要提示

1) 添加选项

 

            errorContainer: container,
            errorLabelContainer: $("ol", container),
            wrapper: 'li',
            meta: "validate",
            errorClass: "SummaryItem", //"unchecked"/"SummaryItem"
            validClass: "checked",
            errorElement: "span",

　　 

2) 设置样式

 

       
        div.ValidateSummary span
        {
            margin:0px;
        }
        div.ValidateSummary span.SummaryItem
        {
            padding: 3px 5px 3px 0px;
            margin-left: 0px;
            margin-top: 0px;
            margin-bottom: 3px;
            display: inline;
            height: 25px;
            line-height: 1px;
            font-size: 12px;
            white-space: nowrap;
            text-align: left;
            color: #E6594E;
        }
        
        div.ValidateSummary
        {
            background-color: #eee;
            border: 1px solid red;
            margin: 5px;
            padding: 5px;
            
        }
        div.ValidateSummary h4
        {
            margin: 8px;
        }
        div.ValidateSummary ol
        {
            margin-left:25px;
            color: #E6594E;
        }
        div.ValidateSummary ol li
        {
            list-style-type: decimal;
            margin: 5px 5px 5px 0px;
            padding:0px;
        }
        div.ValidateSummary
        {
            display: none;
        }

　　

 

　　

3) 添加摘要标记

 可以放在顶部或底部，或者两个地方都放。

        <div class="ValidateSummary">
            <h4>
                系统提醒，您的输入存在下面的问题：</h4>
            <ol>
            </ol>
        </div>