1

Aqui está um exemplo do formulário. Nota: em cada TR(Linha) o utilizador, ao preencher um input, tem de preencher também o outro input.

document.addEventListener("DOMContentLoaded", function(){
   
   document.getElementById("form").onsubmit = function(e){
      
      var tr = document.querySelectorAll("#tabcli1 tr");
      
      for(var x = 0; x < tr.length; x++){
         
         var inps = tr[x].querySelectorAll("input");
         
         for(var i = 0; i < inps.length; i++){
            if(inps[i].value.trim()) break;
         }

         if(i == inps.length){
            e.preventDefault();
            alert("Tem de preencher os dois campos das linhas que tem um valor!");
            break;
         }else{
           
         }
         
      }
   
   }
   
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="form">
<table class="table table-bordered table-striped" style="width:100%;" id="tabcli1">
  <thead>
  </thead>
  <tbody>
    <tr class="table__row">
      <td class="table__content" data-heading="Quantidade"><input min='0' oninput='this.value = Math.abs(this.value)' type="number" class="form-control" name="Quantid[]" ></td>
      <td class="table__content" data-heading="Tamanho"><select class="form-control" name="taman[]"><option></option><option value="S"> S</option><option value="M"> M</option><option value="L"> L</option></select></td>
    </tr>
  </tbody>
  <tbody>
    <tr class="table__row">
      <td class="table__content" data-heading="Quantidade"><input min='0' oninput='this.value = Math.abs(this.value)' type="number" class="form-control" name="Quantid[]" ></td>
      <td class="table__content" data-heading="Tamanho"><select class="form-control" name="taman[]"><option></option><option value="S"> S</option><option value="M"> M</option><option value="L"> L</option></select></td>
    </tr>
  </tbody>
  <tbody>
    <tr class="table__row">
      <td class="table__content" data-heading="Quantidade"><input min='0' oninput='this.value = Math.abs(this.value)' type="number" class="form-control" name="Quantid[]" ></td>
      <td class="table__content" data-heading="Tamanho"><select class="form-control" name="taman[]"><option></option><option value="S"> S</option><option value="M"> M</option><option value="L"> L</option></select></td>
    </tr>
  </tbody>
</table>
<div style="float: right; width:  100%;">
  <button class="btn btn-raised btn-success ripple-effect" style="float: right;" >Gravar <i class="fa fa-paper-plane"></i></button> 
  </div>
</form>

A maneira como meu código está a executar, obriga a preencher pelo menos um input em cada linha.

O que eu pretendo é que se preencher um dos inputs na linha, obrigue a preencher o outro input da mesma linha.

1 Resposta 1

0

Cada linha tem apenas um input e um select. Podemos verificar se ambos estão vazios ou se só um deles está vazio.

for(var x = 0; x < tr.length; x++){
    
    var inps = tr[x].querySelectorAll("input");
    var selects = tr[x].querySelectorAll("select")

    if (inps[0].value == "" && selects[0].value == "") {
        e.preventDefault();
        alert("Tem de preencher todas as linhas!");
        break;
    }

    if (inps[0].value == "" || selects[0].value == "") {
        e.preventDefault();
        alert("Tem de preencher os dois campos das linhas que tem um valor!");
        break;
    }
}

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 .