I'm trying to validate inputs in a table.

I have a table with rows and in their inputs. If some of the input is not empty, We need to check whether the adjacent input has value, if not return false. If both are empty true.

I made a little demo of what I want to do. /

$(document).ready(function() {

  $("table tr :input").each(function () {
      console.log(this.value);
      // some check here
  });

});

Thanks.

I'm trying to validate inputs in a table.

I have a table with rows and in their inputs. If some of the input is not empty, We need to check whether the adjacent input has value, if not return false. If both are empty true.

I made a little demo of what I want to do. https://jsfiddle/51bz8ggv/2/

$(document).ready(function() {

  $("table tr :input").each(function () {
      console.log(this.value);
      // some check here
  });

});

Thanks.

• javascript
• jquery

• 1 You'll need to look through each row, not each input: $("table tr").each(function() { $(this).find(":input").first().value == ""... – fdomn-m Commented Feb 6, 2017 at 13:51
• @freedomn-m his code is selecting the inputs. Notice a space between tr and input. – ibrahim mahrir Commented Feb 6, 2017 at 14:01
• What do want to check? Wether they're empty or not? – ibrahim mahrir Commented Feb 6, 2017 at 14:01
• 1 @ibrahimmahrir yes, he's selecting all the inputs - thus making it impossible to check if the two on the same row have values. So the hint I provided (without doing all the work) is to check each row at a time, as per the requirements in the question. – fdomn-m Commented Feb 6, 2017 at 14:03
• @freedomn-m Yeah you're right! My bad! – ibrahim mahrir Commented Feb 6, 2017 at 14:05

4 Answers 4

https://jsfiddle/51bz8ggv/3/

$(document).ready(function() {
    $("table td:nth-child(1) :input").each(function(index) {

        var rowDate = $(this).val()
        var rowPoints = $("table td:nth-child(2) :input").eq(index).val()

        if (rowDate === "" && rowPoints === "") {
            //both are empty
            console.log(index + " : true")
        } else if (rowDate !== "" && rowPoints !== "") {
            //both have values
            console.log(index + " : true")
        } else {
            //one is empty and the other have value
            console.log(index + " : false")
        }
    });
});

I'm using nth-child(1) to loop through the first column than pare the value with the input in nth-child(2) aka the 2nd column. so if you work with different table be sure to adjust these numbers to fit the columns you're paring

Iterate over the tr and pare the total input element with empty input field count.

// get all tr except the first and iterate over them
$("table tr:nth-child(n+2)").each(function() {
  // get all input fields within it
  var $inp = $(':input', this);
  // filter out all empty input fields
  var $fil = $inp.filter(function() {
    return $(this).val().trim() == '';
  });
  // now check all are non-empty or all are empty
  console.log($fil.length == 0 || $fil.length == $inp.length);
});

$("table tr:nth-child(n+2)").each(function() {
  var $inp = $(':input', this);
  var $fil = $inp.filter(function() {
    return $(this).val().trim() == '';
  });
  console.log($fil.length == 0 || $fil.length == $inp.length);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%" border="1">
  <tr>
    <th>Date</th>
    <th>Points</th>
    <th>Result</th>
  </tr>
  <tr>
    <td>
      <input type="text" name="date[]" class="date" value="2016-09-02" />
    </td>
    <td>
      <input type="text" name="points[]" class="points" />
    </td>
    <td>false(error)</td>
  </tr>
  <tr>
    <td>
      <input type="text" name="date[]" class="date" />
    </td>
    <td>
      <input type="text" name="points[]" class="points" value="679" />
    </td>
    <td>false(error)</td>
  </tr>
  <tr>
    <td>
      <input type="text" name="date[]" class="date" value="2016-09-02" />
    </td>
    <td>
      <input type="text" name="points[]" class="points" value="679" />
    </td>
    <td>true</td>
  </tr>
  <tr>
    <td>
      <input type="text" name="date[]" class="date" />
    </td>
    <td>
      <input type="text" name="points[]" class="points" />
    </td>
    <td>true</td>
  </tr>
</table>

This could be helpful.

$(document).ready(function() {
  $("table tr").each(function () {
        $inputarray = $(this).find("input");
      $length = $inputarray.size();
      if($length>0){
      $i = 0;
        $inputarray.each(function() {
          if(this.value!=="") {
            $i++;
          }
        });
        if($i===0 || $i===$length){
            $(this).find( "td:last" ).text("true");
        } else {
            $(this).find( "td:last" ).text("false");
        }
      }    
  });
});

Your updated Fiddle

Try this code:

 $(document).ready(function() {

  $(".date").each(function () {
      var $that = $(this);
      var $currentRow = $that.parents("tr");
      var $points = $currentRow.find(".points");
      console.log($that.val() )
      console.log($points.val() )
      var $currentROw = $currentRow.find("td:last-child").text(($that.val() == "" && $points.val() == "") || ($that.val() != "" && $points.val() != ""));
  });
});

https://jsfiddle/oa42nzr0/