Jaki jest najlepszy sposób umieszczania wiadomości sprawdzania poprawności za pomocą Twitter Bootstrap 3

Question

Używam MVC4, ale wyobrażam sobie, że jest to problem dla każdego, kto używa nowej wersji Bootstrap 3. Ponieważ kontrola formularza ma teraz szerokość: domyślnie 100%, jaka jest najlepsza praktyka umieszczania wiadomości sprawdzania poprawności?

W wersji 2.x umieszczanie komunikatów sprawdzania poprawności w obszarze pomocy inline tuż po tym, jak kontrola wprowadzania danych działała najlepiej, aby upewnić się, że wiadomość została umieszczona po prawej stronie formantu.

Jednak w wersji 3 są zawsze wypychane na dół, co powoduje, że wszystkie elementy sterujące przesuwają się w dół, ponieważ komunikaty sprawdzania poprawności są wymuszane pod kontrolą.

<div class="form-group has-error"> 
    <label for="Label" class="col-lg-2 control-label">Label</label> 
    <div class="col-lg-5"> 
     <input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value=""> 
     <span class="help-inline"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></span> 
    </div> 
</div> 

ja uważane ręcznie ustawiając je na nowej kolumnie tak (poniżej), ale zastanawiam się, czy nie było bardziej akceptowalny sposób mniej lub ręczny sposób radzenia sobie z tym.

<div class="form-group has-error"> 
    <label for="Label" class="col-lg-2 control-label">Label</label> 
    <div class="col-lg-5"> 
     <input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value=""> 
    </div> 
    <div class="col-lg-5"> 
     <p class="form-control-static"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></p> 
    </div> 
</div> 

Answer 1

Nie powiedziałbym, że istnieją "najlepsze praktyki" do przedstawiania błędów sprawdzania poprawności formularza. To bardziej osobisty wybór.

W zależności od tego ile JS chcesz pisać, można uzyskać trochę zręczny i wstawić dodatek grupy wejść, która utrzymuje się komunikat o błędzie w ikonę podpowiedzi, jak tak ...

<div class="input-group"> 
    <input type="text" class="form-control"> 
    <span class="input-group-addon"> 
    <i data-toggle="tooltip" title="Error msg here" data-container="body" class="glyphicon glyphicon-question-sign"></i> 
    </span> 
</div> 

Rzetelnie chociaż , Myślę, że wiadomości pojawiające się pod polami wprowadzania są w porządku, o ile nie zakłócają układu strony i nie wyświetlają treści, gdy się pojawią. (Co jest tylko kwestią posiadania kontenera, który wyświetla blok i ma zakodowaną wysokość.)