Shefarol Soluções Web

Exemplo 2 - Voltar





 

O código HTML
<form id="cadastro" method="post" action="">
	<p>
		<label for="nome">Nome (obrigatório, pelo menos 2 caracteres)</label><br>
		<input type="text" id="nome" name="nome" required minlength="2" class="form-control">
	</p>
	<p>
		<label for="email">E-mail (obrigatório)</label><br>
		<input type="email" id="email" name="email" required  class="form-control">
	</p>
	<p>
		<label for="idade">Idade (obrigatório)</label><br>
		<input type="number" id="idade" name="idade" required min="10" max="99"  class="form-control w-25">
	</p>
	<p>
		<label for="comentario">Seu comentário (obrigatório)</label><br>
		<textarea id="comentario" name="comentario" rows="8" required  class="form-control"></textarea>
	</p>
	<p>
		<input type="submit" value="Enviar" class="btn btn-primary">
	</p>
</form>

 

Insira os scripts antes da tag /BODY
<!-- Inclusão do Plugin jQuery Validation - https://jqueryvalidation.org/ -->
<!--script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.js"></script-->
	
<!-- O Plugin baixado com as traduções -->
<script src="js/jquery.validate.js"></script>

<!-- Inclusão das validações com o Plugin jQuery Validation-->
<script type="text/javascript">
	// Validação simples
	$("#cadastro").validate();
</script>

 

Um CSS dentro da tag BODY para formatar os erros
.error{
	color: #F00;
	position: relative;
}

 

Faça o download do arquivo jquery.validate.js aqui