Aprenda TI

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!

0 comentários:

Postar um comentário