Set class for textbox on focus using Javascript
I have the following Bootstrap HTML code
<div class="form-group">
<label class="col-sm-2 control-label labelfont">FIRST NAME:</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Enter the First Name" id="FirstName" onkeypress="return onlyAlphabets(event);">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_FirstName">Enter the first name</label>
</div>
My JS code in Tabout looks like this
$("#FirstName").blur(function () {
if ($(this).val().trim().length == 0)
{
$(this).addClass('borderclass');
$("#Err_FirstName").show();
}
else {
$("#Err_FirstName").hide();
$(this).removeClass('borderclass');
}
});
Borderclass is shown as
.borderclass
{
border:1px solid red;
}
The above code works fine on a tab.
But when I move the focus back to the control to enter values, I no longer see the red frame.
I thought bootstrap has its own CSS for each control, which is set when focus returns to the control. To fix this, I tried the following which didn't work
$("#FirstName").focusin(function () {
if($("#Err_FirstName").visible)
$(this).addClass('borderclass');
});
Any help in the right direction would be appreciated. Thank you so much.
source to share
There is no property in jQuery objects visible
. However, there is $.fn.is
one that does what you want. That is, you can use a pseudo selector :visible
as an argument in a method is
that returns a boolean value.
$("#FirstName").focusin(function () {
if($("#Err_FirstName").is(":visible"))
$(this).addClass('borderclass');
}
source to share