how to set border color of a texbox using jquery

Question

How to set a default border color of a control using 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
        }

How to Set border-color as loaded when page was loaded.

Answer 1

Get the border color at page load and store in a variable:

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

And then you can use it later:

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

Also make sure that there is a border at least eg border:1px solid #colorcode

Answer 2

I would suggest creating a new style class called error and applying it on the textbox when the field contains error. Code snippet:

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

Advantage: If the field does not have any error, we can just remove the error class and the textbox look and feel will return to the original style. No need to track the original border color explicitly. And the style rule is re-usable too! ;-)