2

Estou desenvolvendo um plugin de validação de formulário html para CPF, CEP, DATA, TELEFONE.

consegui achar um que adiciona um method para CPF no Jquery Validation, mas estou tendo dificuldades para editar o código e fazer funcionar para os outros campos:

Podem me dar algum exemplo de como eu faria ?

UPDATE: PROBLEMA RESOLVIDO !! E Era: os scripts que eu estava usando usavam um determinado tipo de

aspas ” enquanto o resto do meu código era " .

ADDMETHOD

            jQuery.validator.addMethod("cpf", function(value, element) {
           value = jQuery.trim(value);
            value = value.replace('.','');
            value = value.replace('.','');
            cpf = value.replace('-','');
            while(cpf.length < 11 ) cpf = "0"+ cpf;  
            var expReg = /^0+$|^1+$|^2+$|^3+$|^4+$|^5+$|^6+$|^7+$|^8+$|^9+$/;
            var a = [];
            var b = new Number;
            var c = 11;
            for (i=0; i<11; i++){
                a[i] = cpf.charAt(i);
                if (i < 9) b += (a[i] * --c);
            }
            if ((x = b % 11) < 2) { a[9] = 0 } else { a[9] = 11-x }
            b = 0;
            c = 11;
            for (y=0; y<10; y++) b += (a[y] * c--);
            if ((x = b % 11) < 2) { a[10] = 0; } else { a[10] = 11-x; }

            var retorno = true;
            if ((cpf.charAt(9) != a[9]) || (cpf.charAt(10) != a[10]) || cpf.match(expReg)) retorno = false;

            return this.optional(element) || retorno;

        }, "Informe um CPF válido");


        $(document).ready(function(){

           $("#formH2H").validate({
              rules: {
                  cpf: {cpf: true, required: true}
              },
              messages: {
                 cpf: { cpf: 'CPF inválido'}
              }
              ,submitHandler:function(form) {
                 alert('Muito bem, as informações estão corretas.');
              }
           });
        });

só que travei ai.. ja tentei olhar plugins em javascript, até achei uns que funcionam, mas fica muito estranho pois um insere um texto embaixo do campo e outro abre um alert..

E para adicionar uma máscara aos inputs, tambem achei alguns na internet, mas no meu código não estão funcionando.

MASCARAS

jQuery(function($){
       $("#date").mask("99/99/9999");

       $("#tel").mask("(999) 999-9999");
});

Fiddle

OBS: preciso que a formatação e a máscara seja totalmente feita via Jquery ou Javascript, não podendo contar com o html, preciso chamar cada id do campo, e formata-lo e valida-lo.

EDIT:

Então, o problema é que precisa fazer a formatação e máscara para qualquer formulário.. no caso que você mostrou, eu precisaria alterar o html, o que não é a intenção. como eu passaria os para parâmetros que você colocou no html, direto no .js ?

2 Respostas 2

2

UPDATE

Para máscara você pode utilizar este plugin Masked Input Pluguin pra jQuery.

Precisa baixar o arquivo e instalar no seu diretório, e depois fazer a chamada no HTML:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

E então é só acrescentar as ids do formulário no script, mudando as regras conforme a necessidade, por exemplo (veja abaixo em executar trecho de código):

   $("#phone").mask("(999) 999-9999");
   $("#date").mask("99/99/9999");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://rawgit.com/digitalBush/jquery.maskedinput/1.4.0/dist/jquery.maskedinput.js"></script>
Data
<br>
<input type="text" id="date">
<br>
Fone
<br>
<input type="text" id="phone">

/UPDATE

Para máscaras de CEP, RG, CPF e data, já usei este em JS puro:

// máscara de cep rg, cpf etc
function formatar(mascara, documento){
    var i = documento.value.length;
    var saida = mascara.substring(0,1);
    var texto = mascara.substring(i)
    if (texto.substring(0,1) != saida){
        documento.value += texto.substring(0,1);
    }
}
<label for="Cep"> CEP: </label>
      <input type="text" size="8" id="Cep" maxlength="9" OnKeyPress="formatar('#####-###', this)">
<br>
<label id="data">Data de Nascimento:</label>
      <label for="Cdata"></label>
        <input type="text" name="data" id="data" size="9" maxlength="10" OnKeyPress="formatar('##/##/####', this)">
<br>
      <label for="Cpf"> CPF:</label>
      <input type="text" id="Cpf" size="12" maxlength="14"  OnKeyPress="formatar('###.###.###-##', this)"/>
<br>
      <label for="Crg"> RG:</label>
      <input type="text" name="Trg" id="Crg" size="12" maxlength="14" OnKeyPress="formatar('##.###.###-##', this)">

Mas hoje estou usando o jQureyMask.

Para telefone tem um tópico excelente aqui: Como diferenciar tipos de telefone

Para a validação você pode usar o JqueryValidator ou o próprio sistema de validação do HTML5 (mas não é compatível com os navegadores mais antigos).

Por exemplo:

<form action="" method="post">
  <p>regexp: <br> <input type="text" name="regexp"pattern="[A-Z-a-z0-9]{10}" required></p>
  <p>email: <br> <input type="email" name="email" required></p>
  <p>url: <br> <input type="url" name="url" required ></p>
  <p>number: <br> <input type="number" name="number" required></p>
  <p>tel: <br> <input type="tel" name="tel" required></p>
  <p>date: <br> <input type="date" name="date" required></p>
  <p>datetime: <br> <input type="datetime" name="datetime" required></p>
  <p>datetime-local: <br> <input type="datetime-local" name="datetime-local" required></p>
  <p>month: <br> <input type="month" name="month" required></p>
  <p>week: <br> <input type="week" name="week" required></p>
  <p>color: <br> <input type="color" name="color" required></p>
  <p>time: <br> <input type="time" name="time" required></p>
  <p>search: <br> <input type="search" name="search" required></p>
  <p>range: <br> <input type="range" min="0" max="5" value="1" name="range" required></p>
  <p><input type="submit" Value="Enviar"></p>
</form>

Fontes:

http://www.tutsup.com/2014/08/28/formularios-html5/

http://blog.naison.com.br/jquery/valide-seus-formularios-com-jquery-validator

Veja ainda:

7
  • Então, o problema é que precisa fazer a formatação e máscara para qualquer formulário.. no caso que você mostrou, eu precisaria alterar o html, o que não é a intenção. como eu passaria os para parâmetros que você colocou no html, direto no .js ? Commented 9/04/2015 às 22:29
  • Ah, agora que vi a observação no op... foi mal, se a moderação quiser apagar blz... btw, também me interessei por uma solução destas, parece bem mais elegante mesmo. :)
    – gustavox
    Commented 9/04/2015 às 23:11
  • Mas então você quer que o script .js "advinhe" o que é cada campo <input type "text">. Por exemplo, o CEP é XXXXX-XXX, o CPF é XXX.XXX.XXX-XX, cada um tem um formato, como o js vai saber qual o formato que deve usar em cada campo (tanto pra máscara quanto validação), se vc não informar no html? Isso é possível?
    – gustavox
    Commented 9/04/2015 às 23:16
  • pela id.. CPF sempre será CPF, telefone sempre será telefone.. essa é a ideia. Commented 10/04/2015 às 0:12
  • Ah entendi. Pra validação não sei, mas pra máscara talvez este plugin seja útil: digitalbush.com/projects/masked-input-plugin Editei a resposta, incluindo este plugin.
    – gustavox
    Commented 10/04/2015 às 0:50
2

Eu desenvolvi um plugin para validação de campos, máscara, validação de upload de arquivo com extensão e tamanho, sistema de encriptação e muito mais. Um plugin completo. Segue o link: https://github.com/joaojuniormail/validaform

1
  • Tem algum exemplo para mostrar?
    – rray
    Commented 11/11/2015 às 13:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .