CODEWITHSUNDEEP
jquerycss
maftyycs
maftyycs

Reputation: 147

How can I remove the box-shadow after clicking away from the input box?

$(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;
}

});

});

I wish to only have a box-shadow when the input has :focus, other than that I want the border-color and margin-bottom remain the same like in the script.

**EDIT: This is my form validation unfortunately.

Upvotes: 2

Views: 1902

Answers (5)

adeneo
adeneo

Reputation: 318212

Assuming you can't use CSS because of dynamic updates, and most likely #fn and .f_n aren't the same element (otherwise you should this), you can just remove the box-shadow on blur

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

Upvotes: 1

frnt
frnt

Reputation: 8795

Add this below example code might work, as you haven't added your HTML and CSS it difficult to understand what else you have added, but you could add this in your jquery.

$(document).ready(function() {
$("input[type='text']").on('focus',function(){
	$(this).css({
 	 "box-shadow": "inset 0 1px 1px #dab6b6, 0 0 8px #da0707"
 		});
	});
  $("input[type='text']").on('blur',function(){
	$(this).css({
 	 "box-shadow": "inset 0 0px 0px #dab6b6, 0 0 0px #da0707"
 		});
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "text">

Upvotes: 1

Andy Tschiersch
Andy Tschiersch

Reputation: 3816

This can be done with pure CSS:

input {
  margin: 2px 0;
  }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  box-shadow: 1px 1px 10px #666;
  outline: 0;
  }
<input type="text" name="fname"><br>
<input type="text" name="lname"><br>
<input type="email" name="email"><br>
<input type="password" name="password"><br>
<input type="password" name="repassword">

Upvotes: 1

Martin S.
Martin S.

Reputation: 142

This is possible with css only if you whant: (other boxshadow than your example)

.f_n:focus {
-webkit-box-shadow: 6px 6px 35px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 6px 6px 35px 0px rgba(0,0,0,0.75);
box-shadow: 6px 6px 35px 0px rgba(0,0,0,0.75);
}

Upvotes: 0

Ganesh Putta
Ganesh Putta

Reputation: 2681

this can done easily with css, may be this will help u

input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
 
input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}
<form action="#" method="post">
  
    <div>
        <label for="name">Text Input</label>
        <input type="text" name="name" id="name" value="" tabindex="1" />
    </div>
  
    <div>
        <label for="textarea">Textarea</label>
        <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
    </div>
  
</form>

Upvotes: 1

Related Questions