jquery validate校验效果使用tooltip

1、设置默认校验效果,包括成功和失败

$.validator.setDefaults({
    showErrors: function(map, list) {
        //var focussed = document.activeElement;
        this.currentElements.removeAttr("title").removeClass("ui-state-highlight");
        //处理校验成功的元素的tip(销毁tooltip)
        var succList = this.successList;
        $.each(succList,function(){
            if ($(this).is(':ui-tooltip')) {
                $(this).tooltip("destroy");
                $(this).removeAttr("title");
            }
        })
        //校验错误tooltip提示
        $.each(list, function(index, error) {
            $(error.element).attr("title", error.message).addClass("ui-state-highlight");
            $(error.element).tooltip({
                items: error.element,
                content: error.message,
                effect: "fade",
                opacity: 0.5,
                position: {my: "left top", at: "left bottom"}
            });
            $(error.element).tooltip("open");
            window.setTimeout(function () {
                if ($(error.element).is(':ui-tooltip')) {
                    $(error.element).tooltip("close");
                }
            }, 2000);

        });
    }
});

2、重置校验(重置表单时)

//重置校验
    jQuery.validator.resetValidate = function(validator,fromId){
        var $elementList = $("#" + fromId).find("input,textarea,select");
        //去除高亮显示
        $elementList.removeClass("ui-state-highlight");
        $.each($elementList, function() {
            //销毁tooltip
            if($(this).is(':ui-tooltip')){$(this).tooltip("destroy");}
            //去掉title
            $(this).removeAttr("title");
        })

        validator.resetForm();
    }

你可能感兴趣的:(web前端)