5

Tenho um formulário que envia os valores inseridos nas input para uma outra página. Quero fazer uma validação entre as inputs, caso um número seja maior que outro, e caso não seja, não passar para a segunda página e avisar com um alert.

Este é o meu código HTML:

<form action="_graphes.php" method="post"> 
  <input type="time" id="time_debut" name="time_debut" step="1" value=''>
  <input type="time" id="time_fin" name="time_fin" step="1" value='' >
  <input id=btn type=submit name=go value=ok>
</form>

E o javascript:

if(document.getElementById("time_debut").value > document.getElementById("time_fin").value){
    alert("Maior");
}

3 Respostas 3

4

Você pode validar o formulário seguindo o exemplo abaixo, complementando coloquei a validação para verificar se um ou os dois campos estão vazios:

html

<form action="_graphes.php" method="post" id="formulario"> 
    <input type="time" id="time_debut" name="time_debut" step="1" value="">
    <input type="time" id="time_fin" name="time_fin" step="1" value="" >
    <input id="btn" type="button" onclick="return envia()" name="go" value="ok">
</form>

O input 'btn' quando é clicado ele chama a função envia() abaixo, onde ocorre a validação e envio do form.

js

function envia() {
        var time_debut = document.getElementById("time_debut").value;
        var time_fin = document.getElementById("time_fin").value;
        if(time_debut == '' || time_fin == '') {
            alert("Preencha todos os campos!");
        }
        else if (time_debut > time_fin){
            alert("Maior");
        }
        else {
            document.getElementById("formulario").submit();
        }   
    }

js (Sem validar se os campos estão vazios)

function envia() {
            var time_debut = document.getElementById("time_debut").value;
            var time_fin = document.getElementById("time_fin").value;
            if (time_debut > time_fin){
                alert("Maior");
            }
            else {
                document.getElementById("formulario").submit();
            }   
        }
2
  • O type do button, tem de ser button, senão com o submit passa sempre para a proxima pagina.
    – akm
    Commented 12/01/2015 às 11:56
  • @akm mudei para 'button', valeu. Commented 12/01/2015 às 12:06
3

Tente fazer colocando o submit apenas no javascript.

Este é o seu HTML:

<form id="frm" action="_graphes.php" method="post"> 
  <input type="time" id="time_debut" name="time_debut" step="1" value=''>
  <input type="time" id="time_fin" name="time_fin" step="1" value='' >
  <input id="btn" type="button" onclick="javascript: btn_click()" name="go" value="ok">
</form>

E o javascript:

function btn_click() {
    if (document.getElementById("time_debut").value > document.getElementById("time_fin").value) {
        alert("Maior");
        return;
    }
    document.getElementById("frm").submit();
}
3

Na tag form, acrescente uma chamada à função de validação do formulário.

<form action="_graphes.php" method="post" onsubmit="validar()"> 

A função de validação vai conter o trecho de código que você já construiu:

function validar() {
    if(document.getElementById("time_debut").value > document.getElementById("time_fin").value) {
        alert("Maior");
        return (false);
    }
    else {
        return (true);
    }
}

O return(false) vai fazer com que a submissão do formulário seja interrompida, e a próxima página não seja chamada.

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 .