CODEWITHSUNDEEP
javascriptcsstextboxborder
kevin
kevin

Reputation: 321

changing textbox border colour using javascript

I'm doing form validation. when the form input is incorrect i add a red border to the textbox:

document.getElementById("fName").style.borderColor="#FF0000"

this then gives me a 2px red border. what i want to do is if the user putas in a correct value to go back to the original border...

can someone tell me how i change the border size and colour in javascript

Upvotes: 20

Views: 135636

Answers (7)

Nandu Hulsure
Nandu Hulsure

Reputation: 133

If the users enter an incorrect value, apply a 1px red color border to the input field:

document.getElementById('fName').style.border ="1px solid red";

If the user enters a correct value, remove the border from the input field:

document.getElementById('fName').style.border ="";

Upvotes: 1

PachinSV
PachinSV

Reputation: 3780

I'm agree with Vicente Plata you should try using jQuery IMHO is the best javascript library. You can create a class in your CSS file and just do the following with jquery:

$('#fName').addClass('name_of_the_class');

and that's all, and of course you won't be worried about incompatibility of the browsers, that's jquery's team problem :D LOL

Upvotes: 2

CEN
CEN

Reputation: 85

You may try

document.getElementById('name').style.borderColor='#e52213';
document.getElementById('name').style.border='solid';

Upvotes: 7

josh.trow
josh.trow

Reputation: 4901

document.getElementById("fName").style.border="1px solid black";

Upvotes: 15

John Hartsock
John Hartsock

Reputation: 86872

Use CSS styles with CSS Classes instead

CSS

.error {
  border:2px solid red;
}

Now in Javascript

document.getElementById("fName").className = document.getElementById("fName").className + " error";  // this adds the error class

document.getElementById("fName").className = document.getElementById("fName").className.replace(" error", ""); // this removes the error class

The main reason I mention this is suppose you want to change the color of the errored element's border. If you choose your way you will may need to modify many places in code. If you choose my way you can simply edit the style sheet.

Upvotes: 28

BumbleB2na
BumbleB2na

Reputation: 10743

Add an onchange event to your input element:

<input type="text" id="fName" value="" onchange="fName_Changed(this)" />

Javascript:

function fName_Changed(fName)
{
    fName.style.borderColor = (fName.value != 'correct text') ? "#FF0000"; : fName.style.borderColor="";
}

Upvotes: 4

Matt Ball
Matt Ball

Reputation: 359786

document.getElementById("fName").style.borderColor="";

is all you need to change the border color back.

To change the border size, use element.style.borderWidth = "1px".

Upvotes: 2

Related Questions