API tools faq
paste
Advertisement
mushroomh3ad

form-jquery-validator

mushroomh3ad
Nov 5th, 2024 (edited)
213
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.93 KB | Software | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Formulário de Cadastro</title>
  7.     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  8.     <style>
  9.         .error {
  10.             color: red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div class="container mt-5">
  16.         <div style='display: none;' id="mensagem-erro" class="alert alert-danger">
  17.             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  18.                 <path d="M12 20C16.4187 20 20 16.4187 20 12C20 7.58125 16.4187 4 12 4C7.58125 4 4 7.58125 4 12C4 16.4187 7.58125 20 12 20ZM12 8C12.4156 8 12.75 8.33437 12.75 8.75V12.25C12.75 12.6656 12.4156 13 12 13C11.5844 13 11.25 12.6656 11.25 12.25V8.75C11.25 8.33437 11.5844 8 12 8ZM13 15C13 15.5531 12.5531 16 12 16C11.4469 16 11 15.5531 11 15C11 14.4469 11.4469 14 12 14C12.5531 14 13 14.4469 13 15Z" fill="#DA1414"></path>
  19.             </svg>
  20.             <span class="message"><strong>Uma ou mais informa&ccedil;&otilde;es divergem do cadastrado na Receita Federal. Insira os dados corretos e tente novamente.</strong></span>
  21.         </div>
  22.         <h2 class="mb-4">Formulário de Cadastro</h2>
  23.         <form id="cadastroForm" class="needs-validation" novalidate>
  24.             <div class="form-group">
  25.                 <label for="nome">Nome Completo</label>
  26.                 <input type="text" class="form-control" id="nome" name="nome" required>
  27.             </div>
  28.  
  29.             <div class="form-group">
  30.                 <label for="cpf">CPF</label>
  31.                 <input type="text" class="form-control" id="cpf" name="cpf" maxlength="11" required>
  32.             </div>
  33.  
  34.             <div class="form-group">
  35.                 <label for="dataNascimento">Data de nascimento</label>
  36.                 <input type="date" class="form-control" id="dataNascimento" name="dataNascimento" required>
  37.             </div>
  38.  
  39.             <button type="submit" class="btn btn-primary">Enviar</button>
  40.         </form>
  41.     </div>
  42.  
  43.         <!-- Carrega o jQuery -->
  44.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  45.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.21.0/jquery.validate.min.js"></script>
  46.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.21.0/additional-methods.min.js"></script>
  47.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.21.0/localization/messages_pt_BR.min.js"></script>
  48.        <!-- Carrega o jQuery Mask Plugin -->
  49.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
  50.     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  51.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  52.  
  53.     <script>
  54.         $(document).ready(function() {
  55.  
  56.             // Aplica a mascara ao campo CPF
  57.             $('#cpf').mask('000.000.000-00');
  58.  
  59.             // Validacao personalizada para CPF
  60.             $.validator.addMethod("cpf", function(value, element) {
  61.                 value = value.replace(/[^\d]+/g, '');
  62.                 if (value.length !== 11) return false;
  63.                 let sum = 0, remainder;
  64.                 for (let i = 1; i <= 9; i++) sum += parseInt(value.substring(i - 1, i)) * (11 - i);
  65.                remainder = (sum * 10) % 11;
  66.                if ((remainder == 10) || (remainder == 11)) remainder = 0;
  67.                if (remainder != parseInt(value.substring(9, 10))) return false;
  68.                sum = 0;
  69.                for (let i = 1; i <= 10; i++) sum += parseInt(value.substring(i - 1, i)) * (12 - i);
  70.                remainder = (sum * 10) % 11;
  71.                if ((remainder == 10) || (remainder == 11)) remainder = 0;
  72.                return remainder == parseInt(value.substring(10, 11));
  73.            }, "Por favor, insira um CPF válido.");
  74.  
  75.            // Configuração do validador
  76.            $("#cadastroForm").validate({
  77.                rules: {
  78.                    nome: {
  79.                        required: true,
  80.                        minlength: 5
  81.                    },
  82.                    cpf: {
  83.                        required: true,
  84.                        cpf: true,
  85.                    },
  86.                    dataNascimento: {
  87.                        required: true,
  88.                        date: true
  89.                    }
  90.                },
  91.                messages: {
  92.                    nome: {
  93.                        required: "Por favor, insira seu nome completo.",
  94.                        minlength: "O nome deve ter pelo menos 5 caracteres."
  95.                    },
  96.                    cpf: {
  97.                        required: "Por favor, insira seu CPF."
  98.                    },
  99.                    dataNascimento: {
  100.                        required: "Por favor, insira sua data de nascimento.",
  101.                        date: "Por favor, insira uma data válida."
  102.                    }
  103.                },
  104.                submitHandler: function(form) {
  105.  
  106.                    // Captura os valores dos campos e cria um objeto
  107.                    const formData = {
  108.                        nome: $("#nome").val(),
  109.                        cpf: manterNumero($("#cpf").val()),
  110.                        dataNascimento: $("#dataNascimento").val()
  111.                    };
  112.  
  113.                    // Exibe o objeto no console
  114.                    console.log("Objeto com os dados do formulário:", formData);
  115.  
  116.                    $('#mensagem-erro').show();
  117.                    //alert("Formulário enviado!");
  118.                    console.log("#cadastroForm");
  119.                    //form.submit();
  120.                }
  121.            });
  122.        });
  123.  
  124.        function manterNumeros(cpf) {
  125.            return cpf.replace(/[^\d]+/g, '');
  126.        }
  127.    </script>
  128. </body>
  129. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!