O JQuery possui uma gama de plug-ins escritos sob o código aberto que permitem que você estenda as funcionalidades do JQuery, o JQuery Validation faz a validação de formulários do lado cliente de um modo simples e fácil, enquanto continua a oferecer uma abundância de opções de personalização. Faz dele uma boa escolha se você está construindo algo novo a partir do zero, mas também se você está tentando integrar algo em uma aplicação existente com muita marcação.
O JQuery Validation é open source e escrito sob a licença MIT e foi construído por um desenvolvedor líder na equipe jQuery UI, com o plug-in você pode validar campos requeridos de uma forma simples, ou customizar suas validações contando com inúmeras possibilidades, desde simples mensagens personalizadas até complexas validações sob regras que você pode definir. O download do JQuery Validation conta com vários exemplos de como utilizar o plug-in.
JQuery Validation: http://jqueryvalidation.org/
JQuery Validation
Exemplo:
Neste exemplo utilizamos o JQuery Validation para validar automaticamente os campos requeridos de um formulário. Para utiliza-lo basta efetuar o download e usar o arquivo contido na pasta Dist.
JQuery
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="Bluefish 2.2.6" />
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>
<style type="text/css">
body {
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
#cadastro label {
width: 250px;
}
#cadastro label.error, #cadastro input.submit {
color: darkorange;
margin-left: 253px;
}
</style>
<!--
Está é uma instalação do JQuery, você apenas precisa apontar
para o respectivo script da versão que você deseja utilizar
jquery.js = JQuery
jquery-ui.js = JQuery UI
jquery-ui.css = JQuery Theme
-->
<link href="./jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript"
src="./jquery-ui-1.11.2.custom/external/jquery/jquery.js">
</script>
<script type="text/javascript"
src="./jquery-ui-1.11.2.custom/jquery-ui.js">
</script>
<!-- JQuery Validatr -->
<script type="text/javascript"
src="./js/jquery-validation-1.13.1/dist/jquery.validate.js"></script>
<!-- Script JQuery - JQuery UI -->
<script type="text/javascript">
// Declara UI e funções JQuery
$(document).ready(function() {
$("#cadastro").validate();
$("#accordion").accordion({
heightStyle : "content"
}).accordion("option", "icons", null)
$("#abrir").button()
});
</script>
</head>
<body>
<h1>Desenvolvimento Aberto - JQuery - UI</h1>
<h2>Form Validator - Validação</h2>
<div id="accordion">
<h3>Cadastro</h3>
<div>
<form id="cadastro" method="get" action="">
<table>
<tr>
<td><label for="nome">Nome:</label></td>
<td><input id="nome" name="nome" size="27" required>
<br></td>
</tr>
<tr>
<td><label for="sobrenome">Sobrenome:</label></td>
<td><input id="sobrenome" name="sobrenome" size="35" required>
<br></td>
</tr>
<tr>
<td><label for="cargo">Cargo:</label></td>
<td><input id="cargo" name="cargo" size="28" required>
<br></td>
</tr>
<tr>
<td><label for="salario">Salario:</label></td>
<td><input id="salario" name="salario" size="18" required>
<br></td>
</tr>
</table>
<br>
<button id="abrir" type="submit">Enviar Dados</button>
</form>
</div>
</div>
</body>
</html>
Ricardo Mantovani
Desenvolvimento Código Aberto 