jquery - 单击远离输入框后如何删除框阴影？

Question

$(document).ready(function() {

var fname = "";
var lname = "";
var email = "";
var password = "";
var repassword= "";

$("#fn").keyup(function(){

var vall = $(this).val();

if(vall == "") {
    $("#fnerror").html("Please enter your first name");
    $(".f_n").css({"border-color": "#da0707", "box-shadow": "inset 0 1px 1px #dab6b6, 0 0 8px #da0707", "margin-bottom": "0"});
    $("#fnerror").removeClass("valid-container").addClass("error-container");
    fname = "";
}
else if(vall.length < 3) {
    $("#fnerror").html("First name is too short");
    $(".f_n").css({"border-color": "#da0707", "box-shadow": "inset 0 1px 1px #dab6b6, 0 0 8px #da0707", "margin-bottom": "0"});
    $("#fnerror").removeClass("valid-container").addClass("error-container");
    fname = "";
}
else {
    $("#fnerror").html("Awesome!");
    $(".f_n:focus").css({"border-color": "#5cb85c", "margin-bottom": "0", "box-shadow": "rgb(37, 187, 10) 0px 1px 1px inset, rgb(22, 134, 14) 0px 0px 8px"});
    $("#fnerror").removeClass("error-container").addClass("valid-container");

    fname = vall;
}

});

});

我希望只有当 input 有 :focus 时才有框阴影，除此之外我希望 border-color 和 margin-bottom 与脚本中的一样。

**编辑:不幸的是，这是我的表单验证。

Answer 1

假设由于动态更新而无法使用 CSS，并且很可能 #fn 和 .f_n 不是同一元素 (否则您应该this)，你可以删除模糊的盒子阴影

$(document).ready(function() {

    var fname = "";
    var lname = "";
    var email = "";
    var password = "";
    var repassword = "";

    $("#fn").on({
        keyup : function() {
            var vall = $(this).val();

            if (vall == "") {
                $("#fnerror").html("Please enter your first name");
                $(".f_n").css({
                    "border-color": "#da0707",
                    "box-shadow": "inset 0 1px 1px #dab6b6, 0 0 8px #da0707",
                    "margin-bottom": "0"
                });
                $("#fnerror").removeClass("valid-container").addClass("error-container");
                fname = "";
            } else if (vall.length < 3) {
                $("#fnerror").html("First name is too short");
                $(".f_n").css({
                    "border-color": "#da0707",
                    "box-shadow": "inset 0 1px 1px #dab6b6, 0 0 8px #da0707",
                    "margin-bottom": "0"
                });
                $("#fnerror").removeClass("valid-container").addClass("error-container");
                fname = "";
            } else {
                $("#fnerror").html("Awesome!");
                $(".f_n").css({
                    "border-color": "#5cb85c",
                    "margin-bottom": "0",
                    "box-shadow": "rgb(37, 187, 10) 0px 1px 1px inset, rgb(22, 134, 14) 0px 0px 8px"
                });
                $("#fnerror").removeClass("error-container").addClass("valid-container");

                fname = vall;
            }
        },
        blur : function() {
            $(".f_n").css({
                "box-shadow": "none"
            });
        },
        focus : function() {
            $(this).trigger('keyup');
        }
    });
});