CODEWITHSUNDEEP
javascriptjquerycss
user3861559
user3861559

Reputation: 993

Removing border when the form field is in focus

I am making the border appear for form field during form validation. I am appending error class name div class name to achieve it:

document.getElementById("name").className = document.getElementById("name").className + " error"; 
document.getElementById("email").className = document.getElementById("email").className + " error";  


&.error {
    border:3px solid #cc4337;
    transition:#cc4337 .2s linear 0;
    -webkit-transition:#cc4337 .2s linear 0;
    -moz-transition:#cc4337 .2s linear 0;
}

Now, when I click onto the form field to retype I want the border to disappear. Is there a way I can remove error (or style as border:none) from the class name by tracking what field is focused?

Thanks

Upvotes: 0

Views: 469

Answers (3)

Sean Carroll
Sean Carroll

Reputation: 107

Try

&.error:focus{
  border: none;
  border-color: transparent;
}

or also you could try

document.getElementById(id).style.property=new style

eg.

<script>
    document.getElementById("error").style.border-color = "transparent";
</script>

and possibly implement using something like

 <input type="text" id="fname" onfocus="myFunction(this.id)">

Upvotes: 3

Jabuka
Jabuka

Reputation: 131

Is this what you're after?

$('input.error').on("click", function() {
    $(this).removeClass("error");
});

Or you could use toggleClass but all depends on how you want to proceed after the focus.

Upvotes: 0

David Millar
David Millar

Reputation: 1878

If you want the field to have its border removed temporarily, use the css selector &.error:focus. If you want to make it disappear permanently, you'll need to detect the focus using JavaScript and remove the class like this:

var foo = document.getElementById("email");
foo.className = foo.className.replace( /(?:^|\s)bar(?!\S)/ , '' );

By the way, you should declare the elements as variables this way, since your current implementation makes the code look for the element twice instead of once. :)

Upvotes: 0

Related Questions