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

Question

我将 Boostrap 的表单验证用于我的表单的自定义样式。样式适用于具有 .form-control 的输入，但是当我使用 .input-group-prepend 时，样式不会应用于我的图标。

这是我验证前的表单。

验证后

我怎样才能实现这样的目标？ （我用检查元素创建了这个）

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

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

这种方法可行，但我真的不知道如何在用户输入电子邮件和密码后立即将红色边框更改为绿色。

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

Answer 1

例如，实际上你可以只做echo '<style>.your_input{border-color:green;}</style>';。只需将其放在代码的正确部分