CODEWITHSUNDEEP
javascripthtmlcssforms
The Light Sabrix
The Light Sabrix

Reputation: 127

Change the :focus property of an element using JavaScript

So, I have a jQuery Validation Plugin that does the entire validation process of a form for me.
It works perfectly, but since I have already set the border property in the CSS for an <input />, the border doesn't turn red as it should when the submitted form is invalid—at least I think it should, judging from the demos and videos I've seen.

In order to compensate for that, I'm trying to create a function in JavaScript to do that, using onblur event.

It works, too. However, there is an issue:

You see, I had it set so that while originally the border is simple black, focusing on the input would cause the border to change its color to orange and become thicker, all with a transition property that I have also used.
So, when I set the border to the original color—one that was before the red, be it black or orange—focusing on it no longer changes the color. Right now, black stays black and orange stays orange, although it still becomes thicker.

I've probably confused you, so here's the code:
HTML:

<input type="text" id="name" name="name" placeholder="Your Name" onblur="name_redder()" />

CSS:

#name {
    border: 1px solid black;
    transition: all .1s;
}
#name:focus {
    outline: none !important;
    border: 3px solid #F8CB18;
}

and JavaScript:

function name_redder() {
    var name_form = document.getElementById("mailSender");//#mailSender is the parent DIV.
    var name_label = document.getElementById("name-error");//this is the ID of the label that comes out to show the error text.
    var nameInput = document.getElementById("name");
    var labelStyle = getComputedStyle(name_label);
    if (name_form.contains(name_label)) {
        nameInput.style.borderColor="red";
    }
    if (labelStyle.display == "none") {
        nameInput.style.borderColor="#F8CB18";
    }
}

A note or two: originally, the <label> which appears next to the <input /> doesn't exist—as in isn't even in the code—but the plugin, if the form is invalid, creates it. However, when the form is filled properly, it doesn't simply vanish away. Its display property becomes none.

So the question is – how can I change the border—both normal and :focus—separately inside the second if(), instead of just simply writing nameInput.style.borderColor="#F8CB18";?

Upvotes: 0

Views: 669

Answers (1)

baao
baao

Reputation: 73271

I'd set an event listener on focus and blur and call the function with a parameter

function name_redder(color) {
    var name_form = document.getElementById("mailSender");//#mailSender is the parent DIV.
    var name_label = document.getElementById("name-error");//this is the ID of the label that comes out to show the error text.
    var nameInput = document.getElementById("name");
    var labelStyle = getComputedStyle(name_label);
    if (name_form.contains(name_label)) {
        nameInput.style.borderColor="red";
    }
    if (labelStyle.display == "none") {
        nameInput.style.borderColor= color;
    }
}

and add a listener for focus

focus="name_redder('green')"

Upvotes: 1

Related Questions