Html 将无效/有效样式添加到引导输入组前置

我正在使用Boostrap的表单验证为我的表单定制样式。样式对于具有.form控件的输入非常有效，但当我使用.input group prepend时，样式不会应用于我的图标

这是我确认前的表格

验证后

我怎样才能做到这一点？（我用inspect元素创建了这个）

我在我的JS中添加了一些用于添加自定义样式的代码，这样当用户提交表单并且表单无效时，一些自定义样式就会添加到.input组的prepend中。但是当用户输入电子邮件和密码时，只有输入部分变为绿色，而不是“前置”部分

这种方法很有效，但我真的不知道如何在用户键入电子邮件和密码后将红色边框改为绿色

---

如何轻松实现这种验证样式？

实际上，y只需执行

echo'。您的输入{border color:green；}例如。只需把它放在代码的正确部分
实际上y可以做
echo'。输入{border color:green；}例如。请把它放在你的代码
的正确部分，请考虑为我们创建一个当前的问题。请考虑为我们创建一个当前的问题。

    if (form.checkValidity() === false) {
                    if($(this).attr('id') == 'navbar-login-form'){
                        $('#login-form-button span').empty();
                        $('#login-form-button span').text('Sign in');
                        $('#navbar-login-form .form-group .input-group-prepend').css({
                            "border-top":"1px solid red",
                            "border-left":"1px solid red",
                            "border-bottom":"1px solid red",
                            "border-radius":"10px 0 0 10px"
                        });
                        $("#navbar-login-form .form-group input").attr('style', 'border-left: 0!important');
                    }