Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.
Aparência dos campos com validação
Optamos por não incluir um meio de validação no framework, temos apenas o estilo para os campos.
Para indicar validação de formulários, basta utilizar as classes .ls-error, .ls-warning ou .ls-success no elemento pai deles, ou seja no .ls-label.
A mensagem de ajuda é exibida na classe .ls-help-message, conforme o exemplo abaixo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<form action="" class="ls-form row ls-form-horizontal">
<label class="ls-label col-md-4 ls-success">
<b class="ls-label-text">Nome</b>
<input type="text" name="nome" placeholder="Nome e sobrenome" class="ls-field">
<small class="ls-help-message">Uia! Certa resposta.</small>
</label>
<label class="ls-label col-md-4 ls-warning">
<b class="ls-label-text">E-mail</b>
<input type="text" name="email" placeholder="Escreva seu email" class="ls-field">
<small class="ls-help-message">O seu email parece ter sido removido.</small>
</label>
<label class="ls-label col-md-4 ls-error">
<b class="ls-label-text">Password</b>
<input type="password" name="nome" placeholder="Sua senha" class="ls-field">
<small class="ls-help-message">Sua senha está errada, mano.</small>
</label>
<label class="ls-label col-md-4 ls-success">
<b class="ls-label-text">Comentário</b>
<textarea name="" id="" cols="30" rows="5"></textarea>
<small class="ls-help-message">Mensagem correta.</small>
</label>
<label class="ls-label col-md-4 ls-warning">
<b class="ls-label-text">Comentário</b>
<textarea name="" id="" cols="30" rows="5"></textarea>
<small class="ls-help-message">Mensagem de alerta.</small>
</label>
<label class="ls-label col-md-4 ls-error">
<b class="ls-label-text">Comentário</b>
<textarea name="" id="" cols="30" rows="5"></textarea>
<small class="ls-help-message">Mensage de erro.</small>
</label>
<label class="ls-label col-md-4 ls-success">
<b class="ls-label-text">Selecione a cor</b>
<div class="ls-custom-select">
<select class="ls-select">
<option value="1"> Cor 1 </option>
<option value="2"> Cor 2 </option>
<option value="3"> Cor 3 </option>
<option value="4"> Cor 4 </option>
</select>
</div>
<small class="ls-help-message">Mensagem correta.</small>
</label>
<label class="ls-label col-md-4 ls-warning">
<b class="ls-label-text">Selecione a cor</b>
<div class="ls-custom-select">
<select class="ls-select">
<option value="1"> Cor 1 </option>
<option value="2"> Cor 2 </option>
<option value="3"> Cor 3 </option>
<option value="4"> Cor 4 </option>
</select>
</div>
<small class="ls-help-message">Mensagem correta.</small>
</label>
<label class="ls-label col-md-4 ls-error">
<b class="ls-label-text">Selecione a cor</b>
<div class="ls-custom-select">
<select class="ls-select">
<option value="1"> Cor 1 </option>
<option value="2"> Cor 2 </option>
<option value="3"> Cor 3 </option>
<option value="4"> Cor 4 </option>
</select>
</div>
<small class="ls-help-message">Mensagem correta.</small>
</label>
</form>