入力テキストボックスHTMLブートスチッチにエラーがあります

Question

this、特に入力エラーテキストボックスの例を使用しています。

ユーザーがテキストボックス内をクリックした場合のみ、そのテキストボックスを赤で表示し、ユーザーがそのテキストボックスをクリックすると消えます。

これは、sourceを使用して、HTMLの別の部分でこれを行っています。

これに伴う問題は、私は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. はあなたText-Warningのdivからhas-errorクラスを削除します。

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のIDを明らかにしませんでした。 #inputErrorにはスタイリングが関連付けられていないため、意味のあるものを呼び出すことができます。