come impostare il colore del bordo di una texbox usando jquery

Question

Come impostare un colore del bordo predefinito di un controllo 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 
     } 

Come impostare il colore del bordo come caricato quando la pagina è stata caricata.

Answer 1

Prendi il colore del bordo al caricamento della pagina e conservarla in una variabile:

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

e quindi è possibile utilizzare in un secondo momento:

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

Assicurarsi inoltre che non v'è un bordo di almeno ad esempio, border:1px solid #colorcode

Answer 2

Daremo all'elemento html che viene modificato una classe css che specifica il colore.

è sufficiente rimuovere la border-color per ripristinarlo alla classe CSS colore specificato:

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

Answer 3

Vorrei suggerire la creazione di una nuova classe di stile chiamata errore e la sua applicazione sulla casella di testo quando il campo contiene errori . Frammento di codice:

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

Vantaggio: Se il campo non ha alcun errore, possiamo semplicemente rimuovere la classe di errore e il look and feel di testo ritorneremo allo stile originale. Non è necessario tracciare esplicitamente il colore del bordo originale. E anche la regola dello stile è riutilizzabile! ;-)

Answer 4

Per impostare il colore sul caricamento della pagina è possibile effettuare le seguenti operazioni.

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

Per colore del bordo come tutti gli altri detti, ma deve essere sulla sottomissione modulo.

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

E i tuoi JS sarebbe simile a questa

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', ''); 
     } 
} 

Vorrei anche suggerire la stessa logica di creazione di una classe stessa come Veera spiegato e di utilizzare tale.