Проверка данных таблицы, если имеет вход

Question

Я пытаюсь проверить данные таблицы для пустого поля. Я использовал $('td:has(input)'), потому что вся моя ячейка имеет <input type="text" class="form-control">. То, что я хочу сделать, если пользователь нажал кнопку Save, будет проверяться, осталось ли все текстовое поле, иначе оно будет вызывать сообщение. Но пользователь может заполнить одно из текстовых полей, но не может оставаться пустым. Как я могу это достичь?

Таблица:

<div class = "col-md-12"> 

    <table class = "table" id = "customFields"> 

     <thead> 
      <tr> 
       <th>Stock No.</th> 
       <th>Unit</th> 
       <th class = "description">Description</th> 
       <th>Quantity</th> 
      </tr> 
     </thead> 

     <tbody> 
      <tr> 
       <td><input type="text" class="form-control"></td> 
       <td><input type="text" class="form-control"></td> 
       <td><input type="text" class="form-control"></td> 
       <td><input type="text" class="form-control"></td> 
      </tr> 
     </tbody> 

    </table> 

    <button type = "submit" class = "btn btn-primary" id = "addMore">+ Add</button> 
    <button type = "submit" class = "btn btn-danger" id = "removeRow">- Remove</button> 
    <button type = "submit" class = "btn btn-primary" id = "save">Save</button> 

</div> 

Сценарий:

<script> 

    $(document).ready(function() 
    { 
     $("#addMore").click(function() 
     { 
      $("#customFields").append('<tr><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td></tr>'); 
     }); 

     $("#removeRow").click(function() 
     { 
      if ($('#customFields tbody tr').length== 1) 
      { 

       alert('Cannot be left blank'); 
      } 
      else 
      { 
       $('#customFields tr:last').remove(); 
      } 

     }); 

     $("#save").click(function()) 
     { 

      if ($('td:has(input)').text(function() 
      { 

      })); 

     }); 

    }); 


</script> 

Answer 1

Вы могли бы перебрать все элементы с form-control класса и убедиться, что их суммарная длина значения больше нуля.

$("#save").click(function(){ 
    var values = ""; 
    $.each($(".form-control"), function(i, c){ 
     values = values + $(c).val().trim(); // .trim() to remove white-space 
    }); 
    if(values.length > 0) 
    { 
     //Success! 
    } 
    else 
    { 
     // Error! 
    } 
});