Validating Form with JQUERY Validation + Masks

Navigation
2

I'm developing a html form validation plugin for CPF, ZIP, DATA, PHONE.

I was able to find one that adds a method to CPF in Jquery Validation, but I'm having trouble editing the code and making it work for the other fields:

Can you give me some examples of how I would do it?

UPDATE: PROBLEM SOLVED !! And was: the scripts I was using used a certain type of

  

"while the rest of my code was".

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.');
              }
           });
        });

I have tried to look at plugins in javascript, until I found some that work, but it is very strange because one inserts text under the field and another opens an alert.

And to add a mask to inputs, I also found some on the internet, but in my code they are not working.

MASKS 

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

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

Fiddle

EDIT:

So the problem is that I need to do the formatting and mask for any form .. in case you showed it, I would need to change the html, which is not the intention. how would I pass them to parameters that you put in the html, direct in .js?

    
asked by anonymous 09.04.2015 / 23:11

2 answers

2
  

UPDATE

For mask you can use this plugin Masked Input Pluguin for jQuery.

You need to download the file and install it in your directory, and then make the call in HTML: 

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

And then just add the ids of the form in the script, changing the rules as needed, for example (see below on running code snippet): 

   $("#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><scriptsrc="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

For masks of CEP, RG, CPF and date, I have already used this in pure JS: 

// 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)">

But today I'm using jQureyMask .

For phone you have an excellent topic here: How to differentiate phone types

For validation you can use JqueryValidator or the HTML5 validation system itself (but it is not compatible with older browsers).

For example: 

<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>

Sources:

link

link

See also:

09.04.2015 / 23:27
2

I've developed a plugin for field validation, mask, file upload validation with extension and size, encryption system and more. A complete plugin. Follow the link: link

    
11.11.2015 / 13:38
Discover the highest-valued endpoint ID How to stylize a WPF application to look like Windows 8 applications (Metro style)