Input Textbox HTML Bootswatch has-error

Question

I am using this, specifically the Input Error textbox example.

I only want that textbox to display in red if the user has clicked inside the textbox, and then disappear when user clicks out of it.

I have done this with a different part of HTML using this source.

The problem with this, is that if I use the hide option.. it will hide the entire label and textbox..

Here is my HTML using this along with the source I provided above:

<div class="form-group">
    <div id="Text-Warning" class="has-error">
        @Html.LabelFor(model => model.ATime, "HOBBS:", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div id="H-Alert" class="alert alert-dismissable alert-danger" style="float:right;">
                <button type="button" class="close" data-dissmiss="alert">&times;</button>
                <text>
                    <strong>Leave blank if there is already a Daily Summary for the Day that you are entering! This will auto-calculate based on the previous Summaries.</strong>
                </text>
            </div>
            @Html.EditorFor(model => model.ATime, new { htmlAttributes = new { @id = "inputError", @class = "form-control hobbs-textbox", @placeholder = "xxxx.x" } })
            @Html.ValidationMessageFor(model => model.ATime, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

and my JS:

$(document).ready(function () {
    $('#H-Alert').hide();
    $('.h-textbox').blur(function () {
        $('#H-Alert').hide();
    }).focus(function () {
        $('#H-Alert').show();
    });
});

Again, the above JS works with the alert box.. but how do i get that to display along with the textbox and label when the user clicks inside the textbox and then goes back to normal when the user clicks elsewhere?

any help is appreciated.

score 0 · Answer 1 · answered May 24 '16 at 15:02

So you have a textbox (which it looks like is called #inputError)? When the the user enters the textbox, you want it to go red and for #H-Alert to appear? And when the focus leaves #inputError the colour should revert and the alert should disappear?

If I understand the problem right, something like this seems like it might work:

Remove the has-error class from your Text-Warning div.

Use this jQuery:

var $warningWrapper = $('#inputError').closest('#Text-Warning');
var $alert = $('#H-Alert');
$('#inputError').focus(function(){
    $alert.show();
    $warningWrapper.addClass('has-error');   // has-error is what styles the input and label in red
}).blur(function(){
    $alert.hide();
    $warningWrapper.removeClass('has-error');
});

By the way, I wouldn't give the textbox an id of inputError for the real thing. You can call it something meaningful (because #inputError has no styling associated with it).

Input Textbox HTML Bootswatch has-error

1 Answers1