3

tenho dois inputs e preciso que o valor do input de prazo seja maior que o valor do input de inicio. Ambos são do tipo texto. Alguém poderia me ajudar ?

<div class="w3-half">
     <label>Data de Início</label>
     <input type="text"  name="data_inicio" class="w3-input w3-border" placeholder="YYYY-MM" maxlength="7" minlength="7" pattern="^\d{4}-\d{2}$" title="Insira o valor no formato solicitado: YYYY-MM" required />
</div>
                            
<div class="w3-half" style="width: 40%">
       <label>Prazo</label>
        <input type="text" name="prazo" class="w3-input w3-border" placeholder="YYYY-MM" maxlength="7" minlength="7" pattern="^\d{4}-\d{2}$" title="Insira o valor no formato solicitado: YYYY-MM" required />
</div>

Inputs

1
  • Terá de ser com javascript. E deverias impedir também que as pessoas preencham primeiro o prazo
    – Miguel
    Commented 10/01/2018 às 16:44

3 Respostas 3

2

Você pode fazer essa verificação usando JavaScript. Basta converter os valores em arrays e comparar os números. Criei uma função de exemplo para isso, mas você pode fazer como quiser:

function checa(){

   // pego valores dos campos, transformo em array
   // e converto os valores para tipo número (Number)
   var d_ini = document.querySelector("input[name='data_inicio']")
               .value.split("-").map(Number);
   var d_pra = document.querySelector("input[name='prazo']")
               .value.split("-").map(Number);

   // crio as variáveis com os anos e os meses
   var ano_ini = d_ini[0], mes_ini = d_ini[1];
   var ano_pra = d_pra[0], mes_pra = d_pra[1];

   // Aqui na comparação, se um ano for menor que o outro já não vale
   // OU se os anos forem iguais mas o mês for igual ou menor, tb não vale
   if( (ano_pra == ano_ini && mes_pra <= mes_ini) || ano_pra < ano_ini ){
      alert("Prazo deve ser depois do início!");
   }else{
      // aqui foi validado. Prazo é maior que início
      alert("OK!");
   }
}
<div class="w3-half">
     <label>Data de Início</label>
     <input type="text"  name="data_inicio" class="w3-input w3-border" placeholder="YYYY-MM" maxlength="7" minlength="7" pattern="^\d{4}-\d{2}$" title="Insira o valor no formato solicitado: YYYY-MM" required />
</div>
                            
<div class="w3-half" style="width: 40%">
       <label>Prazo</label>
        <input type="text" name="prazo" class="w3-input w3-border" placeholder="YYYY-MM" maxlength="7" minlength="7" pattern="^\d{4}-\d{2}$" title="Insira o valor no formato solicitado: YYYY-MM" required />
</div>
<input type="button" onclick="checa()" value="Checar" />

7
  • Como posso dar um submit no else ? Commented 10/01/2018 às 17:51
  • <form id="myForm"> <div id="actions" class="row" style="padding-top: 25px; padding-right: 95px"> <input type="hidden" value="inserir" name="acao" </input> <input type="button" onclick="checa()" class="button-upload" value="Salvar" name="salvar" </input> </div> </form> Commented 10/01/2018 às 17:53
  • document.getElementById("myForm").submit(); e não ta dando certo Commented 10/01/2018 às 17:56
  • continua dando não enviando.. não sei porque rs Commented 10/01/2018 às 18:00
  • continua dando pau rs Commented 10/01/2018 às 18:04
1

No caso é recomendável que altere os campos para tipo "date" e é necessário que utilize javascript pra validar os dados e alertar em caso de erro, impedindo que a data do prazo seja menor que do início.

<div class="w3-half">
    <label>Data de Início</label>
    <input type="date" name="data_inicio">
</div>
<div class="w3-half">
    <label>Data de Início</label>
    <input type="text" id="dataInicio" on-change="validarDatas()">
</div>
<div class="w3-half" style="width: 40%">
    <label>Prazo</label>
    <input type="text" id="dataPrazo" on-change="validarDatas()">
</div>
<script>
    function validarDatas(evento) {
        // verificar valor das duas datas e validar/invalidar o campo prazo
    }
</script>

É um código relativamente simples usando o <input type="date"> porque ele este tem as propriedades min e max que recebem datas mínimas e máximas e daí você pode adicionar um método no evento de edição do campo data de início que atualiza o valor do mínimo do campo prazo, sem o input do tipo date você teria que implementar uma verificação e validação ligeiramente mais complexa com o parse de Date para comparar as datas e (in)validar o campo prazo.

Tudo isso depende principalmente do seu uso de frameworks ou ferramentas javascript.

1

Você pode atribuir duas variáveis e uma função que resolve isso:

primeiro de tudo falta o atributo id nos seus input

function verificar(){

   //pega o valor preenchido no inicio
      var data_inico = document.getElementById('data_inicio').value;
      
      //pega o ano inicio
      var ano_i = data_inico.substring(0, 4);

     //pega o mes inicio
      var mes_i = data_inico.substring(5, 7);
    
      //pega o valor preenchido no fim
      var data_fim = document.getElementById('data_fim').value;

      //pega o ano fim
      var ano_f = data_fim.substring(0, 4);
      //pega o mes fim
      var mes_f = data_fim.substring(5, 7);
           
      //chama a função que vai verificar pra você
      var ehValido = valida_data(mes_i, ano_i, mes_f, ano_f);

      //a função ira retornar true ou false** dependendo do valor retornado você pode fazer o que quiser com o código por ex:

      if(ehValido){
         alert("prazo maior que inicio");
      }else{
         alert("prazo menor que inicio");
      }  
      
}
       
    //cria a função valida_data
    
    function valida_data(mes_i, ano_i, mes_f, ano_f){
    
      if(ano_i>ano_f) return false;
      
      if(mes_i>=mes_f){
     
        return false;

      }else{
        
        return true;

      }

    }
        
    
<div class="w3-half">
         <label>Data de Início</label>
         <input type="text" id="data_inicio" name="data_inicio" class="w3-input w3-border" placeholder="YYYY-MM" maxlength="7" minlength="7" pattern="^\d{4}-\d{2}$" title="Insira o valor no formato solicitado: YYYY-MM" required value='2000-01' />
    </div>
                                
    <div class="w3-half" style="width: 40%">
           <label>Prazo</label>
            <input type="text" id="data_fim" name="prazo" class="w3-input w3-border" placeholder="YYYY-MM" value='2000-02' maxlength="7" minlength="7" pattern="^\d{4}-\d{2}$" title="Insira o valor no formato solicitado: YYYY-MM" required />
    </div>
    
     <button id="btnVal" onclick="verificar()">
    valida
    </button>

Pois o javascript "conhece" seus inputs pelos id deles, diferente de uma linguagem back-end que os "conhece" pelo atributo name.

Agora você cria o script javascript que irá fazer essa validação para você. o Exemplo que eu fiz esta funcionando, você pode usar em seu código.

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 .