Boa tarde galera, sou novo na area de programação web e estou desenvolvendo um website, estou criando um formulário onde, se o campo estiver vazio, ele retorna uma mensagem em um label, preciso de algumas coisas que não estou conseguindo fazer:
1 - Após o sistema retornar a mensagem de campo vazio, assim que eu preencher corretamente remover a mensagem do label;
2 - Limitar com mínimo e máximo de caracteres (5 e 10) e retornar mensagem no label também caso possua menos que 5 caracteres, assim que for preenchido corretamente remover a mensagem do label;
3 - Não enviar ao clicar no botão submit caso algum campo esteja vazio ou incorreto.
Código JavaScript que retorna mensagem de campo vazio no label:
<script type="text/javascript">
$(document).ready(function(){
$("input[name='fnome']").blur(function(){
if($(this).val() == "")
{
$(this).css({"border" : "1px solid #F00"});
$("label[for='fnome']").css({"color" : "#F00", "font-size" : "10px", });
$("label[for='fnome']").text(' * O campo nome deve ser preenchido.');
}
});
$("input[name='fuser']").blur(function(){
if($(this).val() == "")
{
$(this).css({"border" : "1px solid #F00"});
$("label[for='fuser']").css({"color" : "#F00", "font-size" : "10px", });
$("label[for='fuser']").text(' * O campo usuário deve ser preenchido.');
}
});
$("input[name='fpass']").blur(function(){
if($(this).val() == "")
{
$(this).css({"border" : "1px solid #F00"});
$("label[for='fpass']").css({"color" : "#F00", "font-size" : "10px", });
$("label[for='fpass']").text(' * O campo senha deve ser preenchido.');
}
});
});
</script>
Formulário:
<form action="gravauser.php" name="formulario" method="post" enctype="multipart/form-data" id="UploadForm">
<table align="center" cellpadding="5">
<tr>
<td>Nome Completo</td>
<td><input type="text" name="fnome" /><label for="fnome"></label></td>
</tr>
<tr>
<td>Usuario</td>
<td><input type="text" name="fuser" /><label for="fuser"></label></td>
</tr>
<tr>
<td>Senha</td>
<td><input type="password" name="fpass" /><label for="fpass"></label></td>
</tr>
<tr>
<td>Nível</td>
<td>
<select name="fnivel">
<option value="1">slave</option>
<option value="2">master</option>
</select>
</td>
</tr>
<tr>
<td>Imagem:</td>
<td>
<input name="fimagem" type="file" multiple />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<br />
<input type="submit" id="BotaoEnviar" value="Enviar" />
</td>
</tr>
</table>
</form>
