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'd give the html element being changed a css class that specifies color.

Just remove the border-color to reset it to the css class specified color:

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

Answer 3

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! ;-)

Answer 4

To set the color on page load you can do the following.

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

For border color as all other told, but it should be on form submission.

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

And your JS would look like this

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

I will also suggest the same logic of creating a class same like Veera explained and to use that.