[英]how to set border color of a texbox using jquery
How to set a default border color of a control using jquery. 如何使用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. 如何在加载页面时将边框颜色设置为已加载。
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
还要确保至少有一个边框,例如border:1px solid #colorcode
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;}
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! 而且样式规则也可以重复使用! ;-) ;-)
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 你的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', '');
}
}
I will also suggest the same logic of creating a class same like Veera explained and to use that. 我还将建议创建和使用Veera解释的类相同的逻辑,并使用它。
I'd give the html element being changed a css class that specifies color. 我给被更改的html元素指定颜色的css类。
Just remove the border-color to reset it to the css class specified color: 只需删除border-color即可将其重置为css类指定的颜色:
_userName.css("border-color", "")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.