Validando formulário com jQuery e validate!

Exemplo simples de como utilizar o plugin jQuery validate.

by gsguma

HTML

<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<p>Validando campos com o plugin jQuery Validate</p>
<p>
    <ul>
        <li><a href='http://bassistance.de/jquery-plugins/jquery-plugin-validation/'>Página do plugin</a></li>
        <li><a href='http://jquery.bassistance.de/validate/jquery.validate.js'>Download do plugin</a></li>
</p>
<br />

<form id="frmExemplo" method="post" action="">
    <label>Nome:</label>
    <input type="text" name="edtNome" id="edtNome" /><br />
    
    <label>E-mail:</label>
    <input type="text" name="edtEmail" id="edtEmail" /><br />
    
    <input type="submit" value="Enviar" id="btnEnviar" />
    <input type="reset" value="Limpar" id="btnLimpar"/>
</form>

CSS

html { font-size: 90% }
body { margin: 10px }
label { color: #333 }
label.error { color: #f00 }
input[type=text] { padding: 3px; margin:5px }
input[type=submit], input[type=reset] {
    padding:5px 15px;
    margin: 5px 5px 5px 0px;
}

JavaScript

//Validando campos com jQuery Plugin "jquery.validate.js":
$(function() {

    //Limpar
    $('#btnLimpar').click(function() {
        $("#frmExemplo").validate().resetForm();
        $("input:first").focus();
    });

    //Validando o formulario
    $('#frmExemplo').validate({
        rules: { //Campos
            edtNome: {
                required: true,
                minlength: 8
            },
            edtEmail: {
                required: true,
                email: true
            }
        },
        messages: { //Mensagens
            edtNome: {
                required: " Informe o nome.",
                minlength: " Informe no m&iacute;nimo 8 caracteres."
              
            },
            edtEmail: {
                required: " Informe o fone ou e-mail.",
                email: " Informe um e-mail v&aacute;lido."
            }
        }
    });
   
});