CODEWITHSUNDEEP
javascriptjquery
didsun
didsun

Reputation: 111

jQuery validate input fields in table cells

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.net/51bz8ggv/2/

$(document).ready(function() {

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

});

Thanks.

Upvotes: 1

Views: 4789

Answers (4)

Solorad
Solorad

Reputation: 914

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.net/oa42nzr0/

Upvotes: 1

user2560539
user2560539

Reputation:

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

Upvotes: 1

Maher Fattouh
Maher Fattouh

Reputation: 1860

https://jsfiddle.net/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 compare 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 comparing

Upvotes: 2

Pranav C Balan
Pranav C Balan

Reputation: 115222

Iterate over the tr and compare 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.com/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>

Upvotes: 1

Related Questions