Validation of a form with javascript if at least one of the inputs of the table rows was completed before submitting the form?

Asked

Viewed 94 times

1

Follow the example of the form Note: in each TR(Line) the user need to fill at least one of the inputs. type choose at least one day of the week available.

<form>
<table id="tabela">
        <tr>
            <td><input type="text" name="segunda" class="form-control"></td>
            <td><input type="text" name="quinta" class="form-control"></td>
            <td><input type="text" name="sabado" class="form-control"></td>
        </tr>
        <tr>
            <td><input type="text" name="segunda" class="form-control"></td>
            <td><input type="text" name="quinta" class="form-control"></td>
            <td><input type="text" name="sabado" class="form-control"></td>
        </tr>
        <tr>
            <td><input type="text" name="segunda" class="form-control"></td>
            <td><input type="text" name="quinta" class="form-control"></td>
            <td><input type="text" name="sabado" class="form-control"></td>
        </tr>
    </table>
    <button type="submit" > Enviar</button>
    </form>

The idea is to make a dynamic function that gives a foreach on each and then check if at least one of the inputs were filled. Like, that would have to be done on every line. They all need to have at least 1 input completed. Thanks in advance for the effort

javascript

  • I don’t understand what’s wrong?

  • I’ve reviewed and edited and nothing....

2 answers

1

Add a function to the onsubmit form to validate the form before sending. In function Send(), recover all available rows in the table and make a loop on those lines. With each loop interaction retrieve all inputs available on the line and make another loop, now for inputs. At each loop iteration the inputs available on that line will be recovered.

For each input it will be checked if the size of the input content is greater than 0, if it is true, it is stored in a variable and control. At each line check, the control variable is tested to see if its value is false (which means that all fields in the line are empty), being false, a message is displayed and exited the function.

At the end of the input loop and line loop is returned true and the form is submitted.

Follows full code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <form onsubmit="return Enviar();">
        <table id="tabela">
            <tr>
                <td><input type="text" name="segunda" class="form-control"></td>
                <td><input type="text" name="quinta" class="form-control"></td>
                <td><input type="text" name="sabado" class="form-control"></td>
            </tr>
            <tr>
                <td><input type="text" name="segunda" class="form-control"></td>
                <td><input type="text" name="quinta" class="form-control"></td>
                <td><input type="text" name="sabado" class="form-control"></td>
            </tr>
            <tr>
                <td><input type="text" name="segunda" class="form-control"></td>
                <td><input type="text" name="quinta" class="form-control"></td>
                <td><input type="text" name="sabado" class="form-control"></td>
            </tr>
        </table>
        <button type="submit" > Enviar</button>
    </form>

    <script>
        function Enviar(){
            var x = false;
            var linhas = document.getElementsByTagName('tr');
            for(var i = 0; i < linhas.length; i++) {
                x = false;
                console.log('linha' + i);
                var inputs = linhas[i].getElementsByTagName('input');
                for(var j = 0; j < inputs.length; j++) {
                    console.log('input' + j);
                    if(inputs[j].value.length > 0){
                        x = true;
                    }
                }
                if(x == false){
                    alert('Preencha pelo menos um campo por linha');
                    return false;
                }
            }
            return true;
        }
    </script>
</body>
</html>

  • Hi Guto, Thanks for the reply! I just tested your code and it didn’t work. segue print: https://puu.sh/EfeWU/34f7941775.png It only passed when I typed in all inputs.

  • You’re right, I’ll modify here.

  • So Brow? ?

  • @Rafael Corrigi, give a look if it works correctly now.

  • Now yes! Thanks! I will analyze and learn this solution!! Thank you very much for your time!

1


One way is to check the fields of each row within one for. If you find a field filled in on the line, cancel the for with break and part for next. If no field is filled in on a line, the for will get the value equal to the number of traversed elements, so no populated field was found on that line and then you cancel Submit with .preventDefault() and shows an alert.

I suggest putting an id on form as below, so that there is no possibility of conflict with another form on the same page:

document.addEventListener("DOMContentLoaded", function(){
   
   document.getElementById("form").onsubmit = function(e){
      
      var tr = document.querySelectorAll("#tabela 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("Preencha pelo menos uma opção em cada linha!");
            break;
         }
         
      }
   
   }
   
});
<form id="form">
<table id="tabela">
  <tr>
      <td><input type="text" name="segunda" class="form-control"></td>
      <td><input type="text" name="quinta" class="form-control"></td>
      <td><input type="text" name="sabado" class="form-control"></td>
  </tr>
  <tr>
      <td><input type="text" name="segunda" class="form-control"></td>
      <td><input type="text" name="quinta" class="form-control"></td>
      <td><input type="text" name="sabado" class="form-control"></td>
  </tr>
  <tr>
      <td><input type="text" name="segunda" class="form-control"></td>
      <td><input type="text" name="quinta" class="form-control"></td>
      <td><input type="text" name="sabado" class="form-control"></td>
  </tr>
</table>
<button> Enviar</button>
</form>

  • Thank you! Your answer is really quite functional :)

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.