Validando campos com jQuery Plugin "jquery.validate.js

by gsguma

HTML

<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<p>Validando campos com jQuery Plugin "jquery.validate.js"</p>
<br />
<form id="id_formulario" method="get" action="">
    <label>Campo 1:</label>
    <input type="text" name="campo1" id="id_campo1" /><br />
    
    <label>Campo 2:</label>
    <input type="text" name="campo2" id="id_campo2" /><br />
    
    <input type="submit" value="Enviar" id="btn_env" />
    <input type="reset" value="Limpar" id="btn_cls"/>
</form>

CSS

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

JavaScript

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

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

    //Validando o formulario
    $('#id_formulario').validate({
        rules: { //Campos
            campo1: {
                multi_1: true,
                //campo1 ou campo2 devem ser preenchidos
                email: true //validacao de e-mail normal
            },
            campo2: {
                multi_2: true,
                //campo1 ou campo2 devem ser preenchidos
                minlength: 8 //validacao de tamanho minimo normal
            }
        },
        messages: { //Mensagens
            campo1: {
                multi_1: " Informe o fone ou e-mail.",
                email: " Informe um e-mail v&aacute;lido."
            },
            campo2: {
                multi_2: " Informe o fone ou e-mail.",
                minlength: " Informe no m&iacute;nimo 8 caracteres."
            }
        }
    });
    
    /*---------------------------------------------------------------------
      MĂ©todos auxiliares para jQuery.validate()
        By Gilton Guma [http://www.gsguma.com.br]
    -----------------------------------------------------------------------
      OBS:
        Pode-se criar apenas um metodo, analisando o elemento:
          if ($(element).attr('id') == 'campo1'){ ...faz alguma coisa... }
        Porem  achei melhor colocar da forma abaixo para facil entendimento!
    ---------------------------------------------------------------------*/
    $.validator.addMethod("multi_1", function(value, element) {
        var campo2 = $('#id_campo2').val();

        //Verifica de problemas retorna falso
        if (value === '' && campo2 === '') {
            return false;
        }

        return true; //Nao tem problemas retorno verdadeiro
    }, "Preencha o campo1 ou campo2.");

    $.validator.addMethod("multi_2",...