changing textbox border colour using javascript

Question

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

Answer 1

You may try

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

Answer 2

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

Answer 3

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

Answer 4

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".

Answer 5

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="";
}

Answer 6

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 ="";