cómo establecer el color del borde de un texbox usando jquery

Question

Cómo establecer un color de borde predeterminado de un control usando jquery.

 if (_userName.val().trim() == "") { 
      errMsg += "\nUserName is a mandatory field."; 
      _userName.css('border-color', 'red'); 
     } 
     else { 
      _userName.css('border-color', 'red');//Set border-color as loaded 
//when page was loaded 
     } 

Cómo establecer el color de borde como cargado cuando se cargó la página.

Answer 1

Obtener el color del borde en carga de la página y almacenar en una variable:

$(function(){ 
    var color = _userName.css('border-color'); 
}); 

Y luego se puede utilizar más adelante:

if (_userName.val().trim() == "") { 
     errMsg += "\nUserName is a mandatory field."; 
     _userName.css('border-color', color); 
    } 
    else { 
     _userName.css('border-color', color); 
    } 

También asegúrese de que hay una frontera, al menos, por ejemplo, border:1px solid #colorcode

Answer 2

Daría al elemento html que se cambia una clase css que especifica el color.

Basta con retirar la frontera color para restablecerlo a la clase css color especificado:

_userName.css("border-color", "") 

Answer 3

que sugeriría la creación de una nueva clase de estilo llamado error y su aplicación en el cuadro de texto cuando el campo contiene errores . Fragmento de código:

CSS: .error{border-color:#F00;}

 if (_userName.val().trim() == "") { 
      errMsg += "\nUserName is a mandatory field."; 
      $("#textboxid").addClass("error"); 
     } 
     else { 
      _userName.css('border-color', 'red');//Set border-color as loaded 
      $("#textboxid").removeClass("error"); 
     } 

Ventaja: Si el campo no tiene ningún error, podemos simplemente eliminar la clase de error y el aspecto y la sensación de texto a volver al estilo original. No es necesario rastrear el color del borde original de forma explícita. ¡Y la regla de estilo es reutilizable también! ;-)

Answer 4

Para configurar el color en la carga de la página, puede hacer lo siguiente.

$(function(){ 
    $('#ID for _userName').css('border-color', color); 
}); 

Para el color del borde como todos los demás, pero debe estar en el envío del formulario.

<form ... onSubmit="ValidateUser(this)"> 
... Your form elements ... 
</form> 

Y sus JS se vería así

function ValidateUser(frmObj){ 

    if (frmObj._userName.value.trim() == "") { 
      errMsg += "\nUserName is a mandatory field."; 
      $('#ID for _userName').css('border-color', color); 
     } 
     else { 
      $('#ID for _userName').css('border-color', ''); 
     } 
} 

También voy a sugerir la misma lógica de la creación de una clase misma como Veera explicado y usar eso.