cambiando el color del borde del cuadro de texto usando javascript

Question

Estoy haciendo la validación del formulario. cuando la entrada de formulario es incorrecta agrego un borde rojo a la caja de texto:

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

esto, entonces me da un borde rojo 2px. lo que quiero hacer es si las putas de usuario en un valor correcto para ir de nuevo a la frontera originales ...

puede alguien decirme cómo puedo cambiar el tamaño y color del borde en javascript

Answer 1

Se puede usar jQuery y:

Change border-bottom color using jquery?

Answer 2

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

es todo lo que necesita para cambiar el color del borde posterior.

Para cambiar el tamaño del borde, use element.style.borderWidth = "1px".

Answer 3

estilos uso de CSS con clases CSS en lugar

CSS

.error { 
    border:2px solid red; 
} 

Ahora en 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 

La razón principal por la que menciono esto se suponga que desea cambiar el color del borde del elemento con error. Si eliges tu camino, es posible que tengas que modificar muchos lugares en el código. Si elige mi camino, simplemente puede editar la hoja de estilos.

Answer 4

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

Answer 5

Estoy de acuerdo con Vicente Plata debe intentar usar jQuery IMHO es la mejor biblioteca de JavaScript. Puede crear una clase en su archivo CSS y simplemente hacer lo siguiente con jQuery:

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

y eso es todo, y por supuesto que no será preocupado por la incompatibilidad de los navegadores, eso es un problema el equipo de jQuery: D LOL

Answer 6

Añadir un evento onchange a su elemento de entrada:

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

Puede intentar

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