sexta-feira, 8 de outubro de 2010
Validando FORM com (JQuery) Validate
Vamos agora validar um formulário com JQuery validate, em seguida estaremos
enviado este mesmo formulário via AJAX utilizando JQuery com PHP.
Obs: É necessario baixar o arquivo com a biblioteca e os plugins
Baixe os arquivos
SIMPLIFICANDO:
< h e a d >
<!-------------------| CSS JQUERY VALIDATE |------------------->
<link href="css/validationEngine.jquery.css" rel="stylesheet" type="text/css">
<!-------------------| PLUGINS JQUERY |------------------->
<script src="js/jquery.js" type="text/javascript"></script>
<script charset="utf-8" src="js/jquery.validationEngine-pt_utf8.js" type="text/javascript"></script>
<script charset="utf-8" src="js/jquery.validationEngine.js" type="text/javascript"></script>
<script charset="utf-8" src="js/cpf_valida.js" type="text/javascript"></script>
<script src="js/jquery.maskedinput.js" type="text/javascript"></script>
<!-------------------| CHAMADA DA FUNÇÃO DE VALIDAÇÃO |------------------->
<script language="javascript">
$(function(){
$('form.formulario').validationEngine();
});
</script>
</ h e a d >
<body>
<form id="formulario" method="post" class="formulario">
<fieldset style='width: 310px;'>
<legend>Formulário</legend>
<table height="160">
<tr>
<td>Nome:</td>
<td>
<input name="nome" type="text" id="nome" class="validate[required,custom[onlyLetter],length[5,100]]" style='width:300px;'/>
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<input name="email" type="text" id="email" class="validate[required,custom[email]]" style='width:300px;'/>
</td>
</tr>
<tr>
<td>Mensagem:</td>
<td>
<textarea name="mensagem" type="text" id="mensagem" class="validate[required]" style='width:300px;'></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="enviar" value="Enviar Formulário." />
</td>
</tr>
</table>
</fieldset>
</form>
</body>
Aconselhamos que para melhor assimilação do post não copie e cole. Entenda!
Postado por
Fabio Mazucato
às
18:46
Enviar por e-mailPostar no blog!Compartilhar no TwitterCompartilhar no FacebookCompartilhar com o Pinterest
Marcadores:
jquery
Assinar:
Postar comentários (Atom)
0 comentários:
Postar um comentário