1

Tenho uma função em JS que valida a data para que não seja menor que a data de hoje, está funcionando corretamente, porém ao apertar o botão do formulário, ele mostra a mensagem que a data está incorreta, e mesmo a data estando errada ele ainda faz o submit.

Código JS:

<script type="text/javascript">
        function validadata(dia) {
            var data = document.getElementById("data").value; // pega o valor do input
            data = data.replace(/\//g, "-"); // substitui eventuais barras (ex. IE) "/" por hífen "-"
            var data_array = data.split("-"); // quebra a data em array
            var dia = data_array[2];
            var mes = data_array[1];
            var ano = data_array[0];
            // para o IE onde será inserido no formato dd/MM/yyyy
            if (data_array[0].length != 4) {
                dia = data_array[0];
                mes = data_array[1];
                ano = data_array[2];
            }

            var hoje = new Date();
            var d1 = hoje.getDate();
            var m1 = hoje.getMonth() + 1;
            var a1 = hoje.getFullYear();
            var d1 = new Date(a1, m1, d1);
            var d2 = new Date(ano, mes, dia);
            var diff = d2.getTime() - d1.getTime();
            diff = diff / (1000 * 60 * 60 * 24);
            if (diff < 0) {
                alert("Data não pode ser anterior ao dia de hoje!");

            } else if (diff > 7) {
                alert("Data não pode ser maior que uma semana!");
            }
        }
        function validarFormulario(cad) {
            if (!validadata(cad.txtDat.value)) {
                return;
            }
            cad.submit();
        }

    </script>

Código do Form:

<form method="post" action="inserirChamado.php" id="cad">
                <div class="form-group">
                    <label class="p-small" for="sel1">Selecione seu problema:</label>
                    <select class="form-control" id="sel1" name="cbProblema"> 
                        <option class="p-small" value="0">Selecione...</option>  
                        <option class="p-small" value="1">Computador reiniciando</option>
                        <option class="p-small" value="2">Computador liga, mas fica com tela preta com beeps</option>
                        <option class="p-small" value="3">Computador não reconhece a capacidade total da(s) memória(s)</option>
                        <option class="p-small" value="4">Computador só entra em modo de segurança</option>
                        <option class="p-small" value="5">Impressora com engasgo do papel</option>
                        <option class="p-small" value="6">Máquina não reconhece teclado e/ou mouse</option>
                        <option class="p-small" value="7">Máquina não conecta à Internet</option>
                        <option class="p-small" value="8">Portas USB não reconhecidas</option>
                        <option class="p-small" value="9">Computador liga, mas não gera</option>
                        <option class="p-small" value="10">Computador não emite som</option>
                    </select>
                </div>

                <label class="p-small" for="sel1">Não achou o seu problema? Descreva-o:</label>
                <input class="form-control p-small" type="text" name="txtDesc" placeholder="Descrição do problema">
                <br>
                <br>
                <label class="p-small" for="sel1">Data para o técnico comparecer ao seu endereço:</label>
                <input class="form-control p-small" type="date" name="txtDat" id="data" required="Esse campo é necessário!" >
                <br>
                <br>
                <button class="btn btn-lg btn-primary btn-block p-large botao" type="submit" id="btn1" onclick="validarFormulario(this.form)" >Cadastrar</button>
            </form>
2
  • 2
    Já tentou usar return false na função?
    – Woss
    4/07/2018 às 1:42
  • Então, ele não está dando o submit mais, porém quando a data está certa não está redirecionando.
    – Leandro
    4/07/2018 às 1:53

1 Resposta 1

3

Use um retorno para validar o formulário no submit.

Faça o seguinte:

Retire o onclick="validarFormulario(this.form)" do botão (inclusive pode retirar o type="submit" também, porque o button dentro do formulário já é de submit).

Coloque na tag form o evento onsubmit="return validarFormulario(this)". Isso irá condicionar o submit ao retorno da função: se for false não envia; se for true, envia.

Na função validarFormulario coloque return false no if:

function validarFormulario(cad) {
   if (!validadata(cad.txtDat.value)) {
       return false;
   }
   cad.submit();
}

Na função validadata coloque return false onde não é válido e no final return true;:

function validadata(dia) {
   var data = document.getElementById("data").value; // pega o valor do input
   data = data.replace(/\//g, "-"); // substitui eventuais barras (ex. IE) "/" por hífen "-"
   var data_array = data.split("-"); // quebra a data em array
   var dia = data_array[2];
   var mes = data_array[1];
   var ano = data_array[0];
   // para o IE onde será inserido no formato dd/MM/yyyy
   if (data_array[0].length != 4) {
       dia = data_array[0];
       mes = data_array[1];
       ano = data_array[2];
   }

   var hoje = new Date();
   var d1 = hoje.getDate();
   var m1 = hoje.getMonth() + 1;
   var a1 = hoje.getFullYear();
   var d1 = new Date(a1, m1, d1);
   var d2 = new Date(ano, mes, dia);
   var diff = d2.getTime() - d1.getTime();
   diff = diff / (1000 * 60 * 60 * 24);
   if (diff < 0) {
       alert("Data não pode ser anterior ao dia de hoje!");
      return false;
   } else if (diff > 7) {
       alert("Data não pode ser maior que uma semana!");
      return false;
   }
      return true;
}

Vai ficar assim:

function validadata(dia) {
   var data = document.getElementById("data").value; // pega o valor do input
   data = data.replace(/\//g, "-"); // substitui eventuais barras (ex. IE) "/" por hífen "-"
   var data_array = data.split("-"); // quebra a data em array
   var dia = data_array[2];
   var mes = data_array[1];
   var ano = data_array[0];
   // para o IE onde será inserido no formato dd/MM/yyyy
   if (data_array[0].length != 4) {
       dia = data_array[0];
       mes = data_array[1];
       ano = data_array[2];
   }

   var hoje = new Date();
   var d1 = hoje.getDate();
   var m1 = hoje.getMonth() + 1;
   var a1 = hoje.getFullYear();
   var d1 = new Date(a1, m1, d1);
   var d2 = new Date(ano, mes, dia);
   var diff = d2.getTime() - d1.getTime();
   diff = diff / (1000 * 60 * 60 * 24);
   if (diff < 0) {
       alert("Data não pode ser anterior ao dia de hoje!");
      return false;
   } else if (diff > 7) {
       alert("Data não pode ser maior que uma semana!");
      return false;
   }
      return true;
}

function validarFormulario(cad) {
   if (!validadata(cad.txtDat.value)) {
       return false;
   }
   cad.submit();
}
<form method="post" action="inserirChamado.php" id="cad" onsubmit="return validarFormulario(this)">
    <div class="form-group">
        <label class="p-small" for="sel1">Selecione seu problema:</label>
        <select class="form-control" id="sel1" name="cbProblema"> 
            <option class="p-small" value="0">Selecione...</option>  
            <option class="p-small" value="1">Computador reiniciando</option>
            <option class="p-small" value="2">Computador liga, mas fica com tela preta com beeps</option>
            <option class="p-small" value="3">Computador não reconhece a capacidade total da(s) memória(s)</option>
            <option class="p-small" value="4">Computador só entra em modo de segurança</option>
            <option class="p-small" value="5">Impressora com engasgo do papel</option>
            <option class="p-small" value="6">Máquina não reconhece teclado e/ou mouse</option>
            <option class="p-small" value="7">Máquina não conecta à Internet</option>
            <option class="p-small" value="8">Portas USB não reconhecidas</option>
            <option class="p-small" value="9">Computador liga, mas não gera</option>
            <option class="p-small" value="10">Computador não emite som</option>
        </select>
    </div>

    <label class="p-small" for="sel1">Não achou o seu problema? Descreva-o:</label>
    <input class="form-control p-small" type="text" name="txtDesc" placeholder="Descrição do problema">
    <br>
    <br>
    <label class="p-small" for="sel1">Data para o técnico comparecer ao seu endereço:</label>
    <input class="form-control p-small" type="date" name="txtDat" id="data" required="Esse campo é necessário!" >
    <br>
    <br>
    <button class="btn btn-lg btn-primary btn-block p-large botao" id="btn1">Cadastrar</button>
</form>

1
  • Obrigado, resolveu meu problema e me tirou umas dúvidas.
    – Leandro
    5/07/2018 às 0:29

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 .