Validação dinâmica de formulário JavaScript

[aenigmat]

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>

[fiote]

Aenigmat,

1º, adicione a classe "obrigatorio" nos seus inputs.

2º, use esse código aqui ao invés do seu ;)

function verificaErro($input) {
   var $label = $input.parent().find('label');


   var msgsErro = {
      'campoVazio':' * O campo nome deve ser preenchido.',
      'tamanhoCampo':' * O campo precisa ter entre 5 a 10 caracteres.'
   };
   
   var problema = '';
   if (!problema && $input.val() == "") problema = 'campoVazio';
   if (!problema && $input.val().length < 5 || $input.val().length > 10) problema = 'tamanhoCampo';


   if (problema == '') {
      $input.css({"border": "0px"});
      $label.text("");
   } else {
      $input.css({"border": "1px solid #F00"});
      $label.css({"color": "#F00","font-size": "10px"}).text(msgsErro[problema]);
   }


   return problema;
}


$(document).ready(function() {


   $('.obrigatorio').blur(function() {
      var $input = $(this);
      verificaErro($input);    
   });


   $('#UploadForm').submit(function(event) {
      var algumProblema = false;


      $('.obrigatorio').each(function() {
         var $input = $(this);
         var problema = verificaErro($input);    
         if (problema != '') algumProblema = true;
      });


      if (algumProblema) event.preventDefault();
   });


});