Как установить цвет границы texbox с помощью jquery

Question

Как установить цвет рамки по умолчанию для элемента управления с помощью 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
        }

Как установить цвет границы, загружаемый при загрузке страницы.

Answer 1

Получить цвет границы при загрузке страницы и сохранить в переменной:

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

А потом вы можете использовать его позже:

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

Также убедитесь, что есть граница, по крайней мере, например border:1px solid #colorcode

Answer 2

Я бы предложил создать новый класс стилей с именем error и применить его к текстовому полю, когда поле содержит ошибку.Фрагмент кода:

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

Преимущество: если в поле нет ошибок, мы можем просто удалить класс ошибок, и внешний вид текстового поля вернется коригинальный стиль.Нет необходимости явно отслеживать исходный цвет границы.И правило стиля тоже можно использовать повторно!; -)

Answer 3

Чтобы установить цвет при загрузке страницы, вы можете сделать следующее.

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

Для цвета рамки, как и все остальные, но он должен быть при отправке формы.

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

И ваш JS будет выглядеть так:

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

Я также предложу ту же логику создания класса, который объяснил Вира, и использовать его.

Answer 4

Я бы дал изменяемому элементу html класс css, в котором указан цвет.

Просто удалите border-color, чтобы вернуть его в указанный цвет класса css:

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