1

Estou com dificuldade para validar meu formulário, estou tentando validar com JavaScript, só que atá agora não consegui validar todos os campos.

Ele só valida o campo que está por último no código. Por exemplo, no código, ele valida o nome, mas não valida o telefone. Estou fazendo ele tudo junto, HTML junto com o JavaScript:

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

  }


  function validar() {
    value = document.getElementById("nascimento").value;
    re = /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/;
    if (re.test(value)) {
      document.troca.submit();
    } else {
      alert('Data de Nascimento Inválida');
      form.nascimento.focus();
      return false;
    }
  }


  function validar() {
    value = document.getElementById("cpf").value;
    re = /([0-9]{2}[\.]?[0-9]{3}[\.]?[0-9]{3}[\/]?[0-9]{4}[-]?[0-9]{2})|([0-9]{3}[\.]?[0-9]{3}[\.]?[0-9]{3}[-]?[0-9]{2})/g
    if (re.test(value)) {
      document.troca.submit();
    } else {
      alert('CPF Inválido');
      form.cpf.focus();
      return false;
    }
  }


  function validar() {
    value = document.getElementById("tel").value;
    re = /^[0-9]{2}-[0-9]{5}-[0-9]{4}/g;
    if (re.test(value)) {
      document.troca.submit();
    } else {
      alert('Telefone Inválido');
      form.tel.focus();
      return false;
    }
  }


  function validar() {
    value = document.getElementById("nome").value;
    re = /^[a-zA-ZéúíóáÉÚÍÓÁèùìòàçÇÈÙÌÒÀõãñÕÃÑêûîôâÊÛÎÔÂëÿüïöäËYÜÏÖÄ\-\ \s]+$/;
    if (re.test(value)) {
      document.troca.submit();
    } else {
      alert('Nome Inválido');
      form.nome.focus();
      return false;
    }
  }
<!DOCTYPE html>
<html lang="pt-BR">

<head>
  <title>Cadastro</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--===============================================================================================-->
  <link rel="icon" type="image/png" href="images/icons/favicon.ico" />
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="css/util.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <!--===============================================================================================-->

</head>

<body>

  <div class="limiter">
    <div class="container-login100">
      <div class="wrap-login100">
        <form class="login100-form validate-form" action="cadastro.php" method="POST" name="form" id="form" onsubmit="return validar();">
          <span class="login100-form-title p-b-26">
						Cadastrar Cliente
					</span>

          <div class="wrap-input100 ">
            <input class="input100" type="text" name="nome" id="nome" required autocomplete="off" />
            <span class="focus-input100" data-placeholder="Nome"></span>
          </div>

          <div class="wrap-input100 validate-input" data-validate="Telefone inválido">
            <input class="input100" type="Tel" name="tel" id="tel" required autocomplete="off" maxlength="13" minlength="13" OnKeyPress="formatar('##-#####-####', this)" />
            <span class="focus-input100" data-placeholder="Telefone"></span>
          </div>

          <div class="wrap-input100 validate-input" data-validate="Email inválido">
            <input class="input100" type="email" name="email" id="email" required autocomplete="off" />
            <span class="focus-input100" data-placeholder="E-mail"></span>
          </div>

          <div class="wrap-input100 validate-input" data-validate="Data inválida">
            <input class="input100" type="text" name="nascimento" id="nascimento" required autocomplete="off" maxlength="10" minlength="10" OnKeyPress="formatar('##/##/####', this)" />
            <span class="focus-input100" data-placeholder="Nascimento"></span>
          </div>

          <div class="wrap-input100 validate-input" data-validate="CPF inválido">
            <input class="input100" type="Tel" name="cpf" id="cpf" autocomplete="off" required maxlength="14" minlength="14" OnKeyPress="formatar('###.###.###-##', this)" />
            <span class="focus-input100" data-placeholder="CPF"></span>
          </div>

          <div class="container-login100-form-btn">
            <div class="wrap-login100-form-btn">
              <div class="login100-form-bgbtn"></div>
              <button type="submit" class="login100-form-btn" onclick="return validar()">
								Confirmar
							</button>
            </div>
          </div>
        </form>

        <div class="container-login100-form-btn">
          <div class="wrap-login100-form-btn">
            <div class="login100-form-bgbtn"></div><a href="painel.html"><button class="login100-form-btn">Voltar</button></a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="dropDownSelect1"></div>

  <!--===============================================================================================-->
  <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
  <!--===============================================================================================-->
  <script src="vendor/animsition/js/animsition.min.js"></script>
  <!--===============================================================================================-->
  <script src="vendor/bootstrap/js/popper.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
  <!--===============================================================================================-->
  <script src="vendor/select2/select2.min.js"></script>
  <!--===============================================================================================-->
  <script src="vendor/daterangepicker/moment.min.js"></script>
  <script src="vendor/daterangepicker/daterangepicker.js"></script>
  <!--===============================================================================================-->
  <script src="vendor/countdowntime/countdowntime.js"></script>
  <!--===============================================================================================-->
  <script src="js/main.js"></script>

</body>

</html>

2 Respostas 2

1

No button type="submit", você chama a função validar() quando o botão é clicado (onclick="return validar()"). Mas depois, no onsubmit do form, chama a função de novo. Então a primeira coisa é remover uma dessas chamadas. Podemos remover do button e deixar somente no form.

Em seguida, você define várias vezes a função validar. Com isso, a função é sobrescrita e vale somente a última definição (no caso, a que valida o nome). Veja um exemplo do que aconteceu no seu caso:

function validar() {
  alert('validar 1');
}
// criando a mesma função de novo
function validar() {
  alert('validar 2');
}
// e de novo
function validar() {
  alert('validar 3');
}

// o alert chamado será "validar 3"
validar();

Ao chamar a função validar() acima, será exibido um alerta com o texto "validar 3". Isso acontece porque eu defini a função 3 vezes, e a terceira vez sobrescreve as anteriores. Foi o que aconteceu quando você definiu várias vezes a sua função validar().

Para evitar este problema - e até mesmo organizar o código - você deve mudar os nomes, indicando o que cada função valida (por exemplo, validarNome, validarCPF, etc), e em seguida ter uma função que valida tudo, ou seja, que chama todas essas funções.

Outro detalhe é que você não precisa chamar submit() dentro destas funções. Colocando a chamada da validação no onsubmit do form, basta retornar true ou false, indicando se o formulário será submetido ou não.

No exemplo abaixo eu dei uma "limpada" no seu HTML (retirei as classes CSS, etc), apenas para focar no mecanismo da validação em si.

function formatar(mascara, documento) {
  let i = documento.value.length;
  let saida = mascara.substring(0, 1);
  let texto = mascara.substring(i);

  if (texto.substring(0, 1) != saida) {
    documento.value += texto.substring(0, 1);
  }
}

function validarDtNasc() {
  let value = document.getElementById("nascimento").value;
  let re = /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/;
  if (!re.test(value)) {
    // campo inválido, retorna false para o formulário não ser submetido
    alert('Data de Nascimento Inválida');
    document.form.nascimento.focus();
    return false;
  }
  return true;
}

function validarCPF() {
  let value = document.getElementById("cpf").value;
  let re = /([0-9]{2}[\.]?[0-9]{3}[\.]?[0-9]{3}[\/]?[0-9]{4}[-]?[0-9]{2})|([0-9]{3}[\.]?[0-9]{3}[\.]?[0-9]{3}[-]?[0-9]{2})/g;
  if (! re.test(value)) {
    // campo inválido, retorna false para o formulário não ser submetido
    alert('CPF Inválido');
    document.form.cpf.focus();
    return false;
  }
  return true;
}


function validarTel() {
  let value = document.getElementById("tel").value;
  let re = /^[0-9]{2}-[0-9]{5}-[0-9]{4}/g;
  if (! re.test(value)) {
    // campo inválido, retorna false para o formulário não ser submetido
    alert('Telefone Inválido');
    document.form.tel.focus();
    return false;
  }
  return true;
}

function validarNome() {
  let value = document.getElementById("nome").value;
  let re = /^[a-zA-ZéúíóáÉÚÍÓÁèùìòàçÇÈÙÌÒÀõãñÕÃÑêûîôâÊÛÎÔÂëÿüïöäËYÜÏÖÄ\-\ \s]+$/;
  if (!re.test(value)) {
    // campo inválido, retorna false para o formulário não ser submetido
    alert('Nome Inválido');
    document.form.nome.focus();
    return false;
  }
  return true;
}

// valida todos os campos
function validarTudo() {
  // se um deles for inválido, retorna false e o form não é submetido
  return validarNome() && validarTel() && validarDtNasc() && validarCPF();
}
<form name="form" id="form" onsubmit="return validarTudo();">
  <div>
    <label for="nome">Nome:</label>
    <input type="text" name="nome" id="nome" required autocomplete="off">
  </div>

  <div>
    <label for="tel">Tel:</label>
    <input type="text" name="tel" id="tel" required autocomplete="off" maxlength="13" minlength="13" onkeypress="formatar('##-#####-####', this)">
  </div>

  <div>
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" required autocomplete="off">
  </div>

  <div>
    <label for="nascimento">Data Nascimento</label>
    <input type="text" name="nascimento" id="nascimento" required autocomplete="off" maxlength="10" minlength="10" onkeypress="formatar('##/##/####', this)">
  </div>

  <div>
    <label for="cpf">CPF:</label>
    <input type="text" name="cpf" id="cpf" autocomplete="off" required maxlength="14" minlength="14" onkeypress="formatar('###.###.###-##', this)">
  </div>

  <div>
    <button type="submit">Confirmar</button>
  </div>
</form>

Repare também que para declarar as variáveis troquei var por let - veja aqui a diferença entre eles.


Sobre as validações

Quanto às validações em si, é importante ressaltar alguns pontos.

A regex do nome aceita vários espaços. Preencha o campo com somente espaços e verá que ela considera válido. Ela também aceita nomes sem sobrenome (escrever somente "João" é válido, cabe a você verificar se isso é realmente válido ou não no seu sistema) Talvez algo assim seja mais preciso, avalie se precisa de algo tão complexo ou deixe para fazer uma validação mais precisa no backend.

No CPF, é interessante validar também os dígitos verificadores, dê uma olhada nesta pergunta para mais detalhes (e faça algumas buscas no site e na internet de modo geral, o que não falta são exemplos para você se basear).

Sobre as expressões regulares, você pode usar \d, que é um sinônimo de [0-9], conforme descrito na documentação. Ou seja:

// em vez dessa
let re = /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/;

// pode usar essa
let re = /^\d{2}\/\d{2}\/\d{4}$/;

Sobre o uso de regex para validar datas, eu comento um pouco nesta resposta e na segunda metade desta outra resposta, e também há exemplos nesta pergunta. Mas talvez seja melhor seguir a recomendação desta resposta e em vez de regex, usar os recursos da linguagem que são específicos para tratar datas, como o próprio objeto Date (também há vários exemplos no site) ou até mesmo uma lib específica, como o Moment.js.

E se quiser, também pode mudar o campo para input type="date", não esquecendo de verificar a compatibilidade dos browsers (e a documentação sugere um workaround para os browsers que não suportam este tipo de input).

E não se esqueça também de validar todas essas informações no backend.

0
  1. Separar seu código em JavaScript/HTML pode ajudar bastante para desenvolvimento futuro

  2. No seu HTML, o tratador para o "click" é onclick="return validar()". Sua função validar é:

function validar() {
    value = document.getElementById("cpf").value;
    re = /([0-9]{2}[\.]?[0-9]{3}[\.]?[0-9]{3}[\/]?[0-9]{4}[-]?[0-9]{2})|([0-9]{3}[\.]?[0-9]{3}[\.]?[0-9]{3}[-]?[0-9]{2})/g
    if (re.test(value)) {
        document.troca.submit();
    } else {
        alert('CPF Inválido');
        form.cpf.focus();
        return false;
    }
}

Está sendo verificado somente o CPF. Claramente, você teria que alterar seu código para verificar cada campo de entrada, e manualmente você terá um grande trabalho, sem contar o esforço pra manter esse código. Dê uma olhada em frameworks que podem te ajudar; sugiro olhar links como https://jqueryvalidation.org/documentation/ e http://form.guide/jquery/validation-using-jquery-examples.html

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 .