【问题标题】:jQuery - Change jqueryvalidate to add class to parent lijQuery - 更改 jquery validate 以将类添加到父 li
【发布时间】:2010-04-08 13:22:51
【问题描述】:

我目前正在尝试编辑 GeekTantra 的 jQuery Validate 插件,以使其在显示错误消息时将类应用于包含输入字段的父列表项。这是我添加的代码 jQuery(id).addClass(redhighlight);我对 jQuery 还很陌生,所以我可能犯了一个明显的错误。

/**
 * @author GeekTantra
 * @date 20 September 2009
 */
(function(jQuery){
    var ValidationErrors = new Array();
    jQuery.fn.validate = function(options){
        options = jQuery.extend({
            expression: "return true;",
            message: "",
            error_class: "ValidationErrors",
            error_field_class: "ErrorField",
            live: true
        }, options);
        var SelfID = jQuery(this).attr("id");
        var unix_time = new Date();
        unix_time = parseInt(unix_time.getTime() / 1000);
        if (!jQuery(this).parents('form:first').attr("id")) {
            jQuery(this).parents('form:first').attr("id", "Form_" + unix_time);
        }
        var FormID = jQuery(this).parents('form:first').attr("id");
        if (!((typeof(ValidationErrors[FormID]) == 'object') && (ValidationErrors[FormID] instanceof Array))) {
            ValidationErrors[FormID] = new Array();
        }
        if (options['live']) {
            if (jQuery(this).find('input').length > 0) {
                jQuery(this).find('input').bind('blur', function(){
                    if (validate_field("#" + SelfID, options)) {
                        if (options.callback_success) 
                            options.callback_success(this);
                    }
                    else {
                        if (options.callback_failure) 
                            options.callback_failure(this);
                    }
                });
                jQuery(this).find('input').bind('focus keypress click', function(){
                    jQuery("#" + SelfID).next('.' + options['error_class']).remove();
                    jQuery("#" + SelfID).removeClass(options['error_field_class']);



                });
            }
            else {
                jQuery(this).bind('blur', function(){
                    validate_field(this);
                });
                jQuery(this).bind('focus keypress', function(){
                    jQuery(this).next('.' + options['error_class']).fadeOut("fast", function(){
                        jQuery(this).remove();
                    });
                    jQuery(this).removeClass(options['error_field_class']);

                });
            }
        }
        jQuery(this).parents("form").submit(function(){
            if (validate_field('#' + SelfID)) 
                return true;
            else 
                return false;
        });
        function validate_field(id){
            var self = jQuery(id).attr("id");
            var expression = 'function Validate(){' + options['expression'].replace(/VAL/g, 'jQuery(\'#' + self + '\').val()') + '} Validate()';
            var validation_state = eval(expression);
            if (!validation_state) {
                if (jQuery(id).next('.' + options['error_class']).length == 0) {
                    jQuery(id).after('<span class="' + options['error_class'] + '">' + options['message'] + '</span>');
                    jQuery(id).addClass(redhighlight);

                }
                if (ValidationErrors[FormID].join("|").search(id) == -1) 
                    ValidationErrors[FormID].push(id);
                return false;
            }
            else {
                for (var i = 0; i < ValidationErrors[FormID].length; i++) {
                    if (ValidationErrors[FormID][i] == id) 
                        ValidationErrors[FormID].splice(i, 1);

                }
                return true;
            }
        }
    };
    jQuery.fn.validated = function(callback){
        jQuery(this).each(function(){
            if (this.tagName == "FORM") {
                jQuery(this).submit(function(){
                    if (ValidationErrors[jQuery(this).attr("id")].length == 0) 
                        callback();
                    return false;
                });
            }
        });
    };
})(jQuery);

【问题讨论】:

    标签: jquery jquery-plugins jquery-validate


    【解决方案1】:

    我是jQuery(id).addClass('redhighlight');

    编辑#1

    jQuery(id).parent().addClass('redhighlight');
    

    这将获取您正在验证的字段的父级并添加 redhighlight 类。它应该可以工作。

    【讨论】:

    • 嗨,j。我尝试添加它,但它似乎不起作用。该类似乎没有应用于页面上的任何元素。我认为它可能在脚本中的错误位置。
    • 为了确定它是否是正确的区域,我将代码替换为 $('li').addClass('redhighlight');这会将页面上的所有列表项变为红色,而不是特定的项,但它是在显示验证失败文本的同时进行的。我认为它应该类似于 $('li').parent.addClass('redhighlight');但这无济于事。
    • 感谢您的帮助,您是传奇!
    猜你喜欢
    • 2011-12-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-05-13
    • 1970-01-01
    • 2011-03-29
    相关资源
    最近更新 更多