Qual è la migliore pratica per inserire messaggi di validazione usando Twitter Bootstrap 3

Question

Sto usando MVC4 ma immagino che questo sia un problema per chiunque usi la nuova versione di Bootstrap 3. Dal momento che il controllo del modulo ora è larghezza: 100% per impostazione predefinita, qual è la procedura migliore per inserire i messaggi di convalida?

Nella versione 2.x, posizionando i messaggi di convalida nell'intervallo di help-inline subito dopo il controllo di input ha funzionato al meglio per garantire che il messaggio fosse posizionato a destra del controllo.

Ma nella versione 3, vengono sempre spinti verso il basso facendo scorrere tutti i comandi perché i messaggi di convalida sono forzati sotto il controllo.

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

Ho considerato impostandole manualmente su una nuova colonna come questo (sotto), ma chiedendosi se ci fosse un modo più accettabile o un modo meno manuale di trattare con questo.

Answer 1

Non direi che esistono "best practice" per la presentazione degli errori di convalida del modulo. È più una scelta di design personale.

A seconda di quanto JS si vuole scrivere, si potrebbe ottenere un po 'slick e inserire un addon gruppo di input che detiene un messaggio di errore in un'icona tooltip, in questo modo ...

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

Onestamente, però , Penso che i messaggi che appaiono sotto i campi di input vadano bene, a patto che non disturbino il layout della pagina e non spengano il contenuto quando appaiono. (Che è solo questione di avere un contenitore che mostra un blocco e ha un'altezza codificata.)