Javascript sends Ubmit even checking date

Question

I have a function in JS that validates the date so that it is not less than today’s date, it is working correctly, but when pressing the button of the form, it shows the message that the date is incorrect, and even though the date is wrong it still makes the Submit.

JS Code:

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

Form Code:

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

Answer 1

Use a return to validate the form on submit.

Do the following:

Remove the onclick="validarFormulario(this.form)" button (you can even remove the type="submit" also, because the button within the form is already submit).

Tag form the event onsubmit="return validarFormulario(this)". This will condition the submit function return: if it is false does not send; if it is true, sending.

In function validarFormulario place return false in the if:

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

In function validadata place return false where it is not valid and at the end 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;
}

It’ll stay that way:

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>