Ho iniziato a usare Bootstrap per ottenere un bel design di pagina senza ricorrere a GWT (il backend è fatto in java)
Per la mia schermata di login ho copiato questo esempio. Ora voglio segnare un errore, per esempio, che il nome utente è stato lasciato vuoto. Quindi mi stavo chiedendo qual è la procedura nel framework Bootstrap per questo. O forse se ci sono esempi che mostrano il modulo con l'errore.
Non sono sicuro se l'idea è quella di mostrare il messaggio di errore all'interno dell'elemento di input con un colore rosso, o di mostrarlo sotto l'elemento di input, o forse con un popup?
(Aggiornato con esempi per Bootstrap v4, v3 e v3)
Esempi di moduli con classi di validazione per le ultime versioni principali di Bootstrap.
Bootstrap v4
Vedere la versione live su codepen
convalida del modulo bootstrap v4
<div class="container">
<form>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label text-success">Email</label>
<div class="col-sm-7">
<input type="email" class="form-control is-valid" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label text-danger">Password</label>
<div class="col-sm-7">
<input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password">
</div>
<div class="col-sm-3">
<small id="passwordHelp" class="text-danger">
Must be 8-20 characters long.
</small>
</div>
</div>
</form>
</div>
Bootstrap v3
Vedere la versione live su codepen
validazione modulo bootstrap v3
<form role="form">
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<input type="text" class="form-control" id="inputWarning">
<span class="help-block">Something may have gone wrong</span>
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with error</label>
<input type="text" class="form-control" id="inputError">
<span class="help-block">Please correct the error</span>
</div>
<div class="form-group has-info">
<label class="control-label" for="inputError">Input with info</label>
<input type="text" class="form-control" id="inputError">
<span class="help-block">Username is taken</span>
</div>
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label>
<input type="text" class="form-control" id="inputSuccess" />
<span class="help-block">Woohoo!</span>
</div>
</form>
Bootstrap v2
Vedere la [versione live](
) su jsfiddleconvalida del modulo bootstrap v2
Le classi .error
, .success
, .warning
e .info
sono aggiunte al .control-group
. Questo è il markup e lo stile standard di Bootstrap nella v2. Segui questo e sei a posto. Naturalmente puoi andare oltre con i tuoi stili per aggiungere un popup o "inline flash" se preferisci, ma se segui la convenzione di Bootstrap e appendi quelle classi di validazione al .control-group
rimarrà coerente e facile da gestire (almeno perché continuerai ad avere il beneficio dei documenti e degli esempi di Bootstrap)
<form class="form-horizontal">
<div class="control-group warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group info">
<label class="control-label" for="inputInfo">Input with info</label>
<div class="controls">
<input type="text" id="inputInfo">
<span class="help-inline">Username is taken</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div>
</div>
</form>
Bootstrap V3:
Official Doc Link 1
Official Doc Link 2
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label>
<input type="text" class="form-control" id="inputSuccess" />
<span class="help-block">Woohoo!</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<input type="text" class="form-control" id="inputWarning">
<span class="help-block">Something may have gone wrong</span>
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with error</label>
<input type="text" class="form-control" id="inputError">
<span class="help-block">Please correct the error</span>
</div>
In genere è meglio mostrare l'errore vicino a dove l'errore si verifica. Per esempio, se qualcuno ha un errore nell'inserire la propria email, si evidenzia la casella di input dell'email.
Questo articolo ha un paio di buoni esempi. http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/
Anche twitter bootstrap ha uno stile carino che aiuta in questo senso (scorrere fino alla sezione Validation states) http://twitter.github.com/bootstrap/base-css.html#forms
Evidenziare ogni casella di input è un po' più complicato, quindi il modo più semplice sarebbe quello di mettere un avviso di bootstrap in alto con i dettagli di ciò che l'utente ha sbagliato. http://twitter.github.com/bootstrap/components.html#alerts