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

我正在使用contact form 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=函数（消息）{
返回此值。每个（函数（）{
var$into=$（本）；
$into.find（'span.wpcf7无效提示'）.remove（）；
$into.append（“”+消息+“”）；
if（$into.is（'.use floating validation tip*'））{
$（'.wpcf7无效提示'，$into）.mouseover（函数（）{
$（this.wpcf7FadeOut（）；
});
$（':input'，$into）.focus（函数（）{
$（'.wpcf7无效提示'，$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
                });
            }
        });
    };

$.fn.wpcf7NotValidTip=函数（消息）{
返回此值。每个（函数（）{
var$into=$（本）；
$into.find（'span.wpcf7无效提示'）.remove（）；
$into.append（“”+消息+“”）；
$into.find（':input'）.css（'border-color'，'red'）；//它将添加红色边框
if（$into.is（'.use floating validation tip*'））{
$（'.wpcf7无效提示'，$into）.mouseover（函数（）{
$（this.wpcf7FadeOut（）；
$into.find（':input'）.removeAttr（'style'）；//用于删除红色
});
$（':input'，$into）.focus（函数（）{
$（'.wpcf7无效提示'，$into）.not（':hidden'）.wpcf7FadeOut（）；
$into.find（':input'）.removeAttr（'style'）；//用于removind红色
});
}
});
};

---

问题：在验证时，它显示验证。但我填充字段时，它应该删除边框颜色。因此，在填充所有内容后，我如何删除该颜色。那么有人能告诉我我缺少了什么或我应该添加什么吗？

在检查插件将近一个小时后，找到了解决方案

您在错误的位置删除了样式

$.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
            });
        }
    });
};

---

希望对你有用。这对我来说是一个伟大的任务：）

为什么人们对否决票更感兴趣，而不是给出解决方案？我的问题很清楚我想要实现什么，我也提供了代码。为什么要编辑.js？你不能用css改变边框吗<代码>边框，

框影

和

轮廓

是查看输入边框时的主要“罪魁祸首”，等等…@Rohil_PHPBeginner这是什么意思？@dingo_d实际上我无法使用CSS，只有cz验证是通过JS完成的，所以我必须使用JS添加CST这很奇怪，因为我编辑了联系人表单7s表单，css中没有太多问题的行为：您是否尝试过用

覆盖它！重要信息

？哇！！你只用了一个小时就成功了，我试了5个小时：）效果很好。谢谢：）

    $.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' });
        });
    };