Ввод текстового поля HTML Bootswatch has-error

Question

Я использую this, в частности, Ошибка ввода пример текстового поля.

Я хочу, чтобы это текстовое поле отображалось красным цветом, если пользователь щелкнул внутри текстового поля, а затем исчезнет, ​​когда пользователь выйдет из него.

Я сделал это с другой частью HTML, используя этот source.

Проблемы с этим, что если я использую опцию hide .. она будет скрывать всю этикетку и текстовое поле ..

Вот мой HTML, используя это вместе с источником Я Приведенный выше:

<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> 

и мои JS:

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

Опять же, выше JS работает с окном предупреждения .. но как получить, чтобы отображать вместе с текстовым полем и меткой, когда пользователь нажимает внутри текстового поля, а затем возвращается к нормальному состоянию, когда пользователь щелкает в другом месте?

всякая помощь приветствуется.

Answer 1

Значит, у вас есть текстовое поле (которое, похоже, называется #inputError)? Когда пользователь входит в текстовое поле, вы хотите, чтобы он загорелся красным цветом и для отображения #H-Alert? И когда фокус уходит #inputError, цвет должен возвращаться, и предупреждение должно исчезнуть?

Если я понимаю проблему правильно, что-то вроде этого, кажется, что это может работать:

1. Удалите has-error класс от вашего Text-Warning дел.

2. Используйте этот 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'); 
   }); 
   

Кстати, я бы не дать текстовое поле идентификатор inputError для реальной вещи. Вы можете назвать это чем-то значимым (потому что #inputError не имеет стиля, связанного с ним).