Javascript sends submit same checking date

Question

Javascript sends submit same checking date

Navigation

#1 by (3 votes)

1

I have a function in JS that validates the date so that it is not smaller than today's date, is working correctly, however when you press the form button, it shows the message that the date is incorrect, and even the date being wrong it still does 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>

javascript html

asked by anonymous 04.07.2018 / 03:41

1 answer

insert server_id in the creation of each record, mysql Bytearray size on disk

score 3 · Accepted Answer

Use a return to validate the form in submit .

Do the following:

Remove the% w / o of the button (you can even remove the% w / w% as well, since the% w / w% of the form is% w /%).

Put in the onclick="validarFormulario(this.form)" tag the type="submit" event. This will condition the button to the return of the function: if submit does not send; if it is form , send.

In function onsubmit="return validarFormulario(this)" put submit in false :

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

In function true put validarFormulario where it is not valid and at the end return false :

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 will look like this:

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>