I'comecei a usar Bootstrap para conseguir um bom design de página sem recorrer ao GWT (o backend é feito em java)
Para a minha tela de login, copiei este exemplo. Agora eu quero marcar um erro, por exemplo, que o nome de usuário foi deixado vazio. Então eu estava me perguntando qual é o procedimento no framework do Bootstrap para isso. Ou talvez se há exemplos mostrando o formulário com erro.
I'não tenho certeza se a idéia é mostrar a mensagem de erro dentro do elemento de entrada com uma cor vermelha, ou mostrá-la abaixo do elemento de entrada, ou talvez com um popup?
(ATUALIZADO com exemplos para Bootstrap v4, v3 e v3)
Exemplos de formulários com classes de validação para as últimas versões principais do Bootstrap.
**Bootstrap v4***
Veja a versão ao vivo no codepen
<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***
Veja o versão ao vivo no codepen
<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***
Veja a [versão ao vivo](
) em jsfiddleAs classes .error',
.success', .warning' e
.info' são anexadas ao grupo .control-group'. Esta é a marcação e estilo padrão de Bootstrap na v2. Basta seguir isso e você're em boa forma. Claro que você pode ir além com seus próprios estilos para adicionar um popup ou "inline flash" se preferir, mas se você seguir a convenção Bootstrap e pendurar essas classes de validação no
.control-group', ele permanecerá consistente e fácil de gerenciar (pelo menos desde que você'continuará a ter o benefício de documentos e exemplos 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***:
Ligação Doc Oficial 1
Link Oficial do Doc 2 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>
Geralmente mostrar o erro perto de onde o erro ocorre é melhor. Ou seja, se alguém tiver um erro ao digitar seu e-mail, você destaca a caixa de entrada de e-mail.
Este artigo tem alguns bons exemplos. http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/
Também o twitter bootstrap tem um estilo agradável que ajuda com isso (vá até à secção de estados de validação). http://twitter.github.com/bootstrap/base-css.html#forms
Destacar cada caixa de entrada é um pouco mais complicado, por isso a maneira mais fácil seria apenas colocar um alerta de inicialização no topo com detalhes do que o usuário fez de errado. http://twitter.github.com/bootstrap/components.html#alerts