How do I prevent empty table rows from being created when a front end form is submitted?

Question

I have a front end form which contains text fields that are connected to a Craft table field. The issue I have is that if I do not fill out the text input fields on the front end it is still creating table rows in the Craft entry. When I looked in the database, I can see that even though I'm not filling out the text input fields in the form, it is still submitting information. This is what is being submitted when the text input field not being filled out: [{"col1":"","col2":""},{"col1":"","col2":""}] My guess is that I have something incorrect in how I'm coding the text input field in the form.

My question: Is there a way to either prevent the table row from getting added if the text input field is empty on the front end form? If not, is there a way that I can use code on the summary template page where the images would be displayed on the front end to filter out any table rows that have no content?

Here's a screenshot of the form input:

Here's my input form code:

<label for="stillImages1" class="field-label">Still Image 1</label>
    <div class="section">
        <div class="frm-row">
            <label for="" class="field prepend-icon">
                <input type="url" name="fields[logReviewer_feedbackStillImages][0][col1]" class="gui-input" placeholder="Paste image 1 link">
                <span class="field-icon"><i class="fa fa-image"></i></span>  
            </label>
        </div><!-- end frm-row -->
        <br />
        <div class="frm-row">
            <label for="" class="field prepend-icon">
                <textarea class="gui-textarea" name="fields[logReviewer_feedbackStillImages][0][col2]" placeholder="Type image 1 comments"></textarea>
                <span class="field-icon"><i class="fa fa-comments"></i></span>  
            </label>
        </div><!-- end frm-row -->                                          
    </div><!-- end section -->
</label>

<label for="stillImages2" class="field-label">Still Image 2</label>
    <div class="section">
        <div class="frm-row">
            <label for="" class="field prepend-icon">
                <input type="url" name="fields[logReviewer_feedbackStillImages][1][col1]" class="gui-input" placeholder="Paste image 2 link">
                <span class="field-icon"><i class="fa fa-image"></i></span>  
            </label>
        </div><!-- end frm-row -->
        <br />
        <div class="frm-row">
            <label for="" class="field prepend-icon">
                <textarea class="gui-textarea" name="fields[logReviewer_feedbackStillImages][1][col2]" placeholder="Type image 2 comments"></textarea>
                <span class="field-icon"><i class="fa fa-comments"></i></span>  
            </label>
        </div><!-- end frm-row -->                                           
    </div><!-- end section -->
</label>

Here's a screenshot of the table field in Craft. Even if I don't actually enter text in the text fields in the form, 2 table rows are created in the entry as shown in this screenshot below.

Here's my code to display images if they were submitted.

{% if entry.logReviewer_feedbackStillImages|length %}

    <div class="c-margin-b-40 ">
        <div class="c-content-divider c-icon-bg c-bg-blue-3">
            <i class="icon-picture c-rounded c-bg-blue-3 c-font-white"></i>
        </div>
    </div>

    <div class="c-body">
        {% for row in entry.logReviewer_feedbackStillImages %}

            <div class="c-margin-b-80">
                <div class="cl-feedbackText c-center c-margin-b-30">{{ row.comment|ucfirst }}</div>
                <div class="embed-responsive embed-responsive-4by3 c-center c-margin-b-50">
                    <img class="embed-responsive-item" src="{{ row.droplrImageLink }}+">
                </div>

            </div>
        {% endfor %}
    </div>
{% endif %}

Answer 1

I figured out a solution. When I looked in the database I could see {"col1":"","col2":""} in the content even though the user didn't enter any content in the front end text form field. I couldn't figure out how to prevent the form from sending a value even if the field was empty, therefore, I added a conditional to the template page which displays the images.

My conditional filters out any table rows that has a value of "".

{% if row.col1 != "" %}

I also added a conditional so my divider graphic either doesn't show (if all rows are "") or just once if any of the rows have user submitted content.

{% if row.col1 != "" and loop.first %}

Here's my new code to display images if they were submitted.:

{% if entry.logReviewer_feedbackStillImages %}
    {% for row in entry.logReviewer_feedbackStillImages %}
        {% if row.col1 != "" and loop.first %}
            <div class="c-margin-b-40 ">
                <div class="c-content-divider c-icon-bg c-bg-blue-3">
                    <i class="icon-picture c-rounded c-bg-blue-3 c-font-white"></i>
                </div>
            </div>
        {% endif %}
    {% endfor %}

    <div class="c-body">
        {% for row in entry.logReviewer_feedbackStillImages %}
            {% if row.col1 != "" %}
            <div class="c-margin-b-80">
                <div class="cl-feedbackText c-center c-margin-b-30">{{ row.comment|ucfirst }}</div>
                <div class="embed-responsive embed-responsive-4by3 c-center c-margin-b-50">
                    <img class="embed-responsive-item" src="{{ row.droplrImageLink }}+">
                </div>
            </div>
            {% endif %}
        {% endfor %}
    </div>
{% endif %}