javascript - jQuery validate input fields in table cells - Stack Overflow

admin管理员组

文章数量:1025235

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

Share Improve this question Follow edited Feb 6, 2017 at 14:36 vsync 131k5959 gold badges340340 silver badges423423 bronze badges asked Feb 6, 2017 at 13:49 didsundidsun 11111 gold badge33 silver badges1111 bronze badges 6

• 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

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 2

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/

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

Share Improve this question Follow edited Feb 6, 2017 at 14:36 vsync 131k5959 gold badges340340 silver badges423423 bronze badges asked Feb 6, 2017 at 13:49 didsundidsun 11111 gold badge33 silver badges1111 bronze badges 6

• 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

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 2

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/

本文标签： javascriptjQuery validate input fields in table cellsStack Overflow