Question

我正在使用联系表单7插件，我希望在文本框周围有边框。所以我更改了script.js文件夹中的includes>JS。

在：

    $.fn.wpcf7NotValidTip = function(message) {
        return this.each(function() {
            var $into = $(this);

            $into.find('span.wpcf7-not-valid-tip').remove();
            $into.append('<span role="alert" class="wpcf7-not-valid-tip">' + message + '</span>');
            if ($into.is('.use-floating-validation-tip *')) {
                $('.wpcf7-not-valid-tip', $into).mouseover(function() {
                    $(this).wpcf7FadeOut();
                });

                $(':input', $into).focus(function() {
                    $('.wpcf7-not-valid-tip', $into).not(':hidden').wpcf7FadeOut();
                });
            }
        });
    };

后：

    $.fn.wpcf7NotValidTip = function(message) {
        return this.each(function() {
            var $into = $(this);

            $into.find('span.wpcf7-not-valid-tip').remove();
            $into.append('<span role="alert" class="wpcf7-not-valid-tip">' + message + '</span>');
            $into.find(':input').css('border-color', 'red');//it will add red color border
            if ($into.is('.use-floating-validation-tip *')) {
                $('.wpcf7-not-valid-tip', $into).mouseover(function() {
                    $(this).wpcf7FadeOut();
                    $into.find(':input').removeAttr('style'); //for removing red color
                });

                $(':input', $into).focus(function() {
                    $('.wpcf7-not-valid-tip', $into).not(':hidden').wpcf7FadeOut();
                    $into.find(':input').removeAttr('style');//for removind red color
                });
            }
        });
    };

问题：在验证时它显示验证。但是我填写了字段，它应该删除那个边框颜色。所以如果我填满所有的东西我怎么能删除那个颜色那么任何人都可以告诉我我错过了什么或者我应该添加什么？

Answer 1

经过插件近一个小时后找到了解决方案。

您正在错误的地方删除风格。

$.fn.wpcf7NotValidTip = function(message) {
    return this.each(function() {
        var $into = $(this);

        $into.find('span.wpcf7-not-valid-tip').remove();
        $into.append('<span role="alert" class="wpcf7-not-valid-tip">' + message + '</span>');
        $into.find(':input').css('border-color', 'red');//it will add red color border
        if ($into.is('.use-floating-validation-tip *')) {
            $('.wpcf7-not-valid-tip', $into).mouseover(function() {
                $(this).wpcf7FadeOut();
                //removed this line from your code
            });

            $(':input', $into).focus(function() {
                $('.wpcf7-not-valid-tip', $into).not(':hidden').wpcf7FadeOut();
                //removed this line from your code
            });
        }
    });
};

您需要在wpcf7ClearResponseOutput此功能中删除您的样式：

    $.fn.wpcf7ClearResponseOutput = function() {
        return this.each(function() {
            $(this).find('div.wpcf7-response-output').hide().empty().removeClass('wpcf7-mail-sent-ok wpcf7-mail-sent-ng wpcf7-validation-errors wpcf7-spam-blocked').removeAttr('role');
            $(this).find('span.wpcf7-not-valid-tip').remove();
            $(this).find(':input').removeAttr('style'); //here I have added those lines for removing style
            $(this).find('img.ajax-loader').css({ visibility: 'hidden' });
        });
    };

希望它适合你。对我来说是一项艰巨的任务：）

联系表单7验证：输入字段周围的边框

1 个答案: