Frontend vs Backend data handling

Question

Firstly I would like an answer from an experienced person (not a one man band), someone whom has worked in a medium/large team and had to battle with this burning question before.

The problem: I am constantly being asked to not submit empty rows

by rows = I mean a list of items and properties.

A good example would be, multiple file uploads.

<form>
    <input type="text" name="pic[0][label]" />
    <input type="file" name="pic[0][file]" />

    <input type="text" name="pic[1][label]" />
    <input type="file" name="pic[1][file]" />

    <input type="text" name="pic[2][label]" />
    <input type="file" name="pic[2][file]" />
    <input type="submit" value="Upload" />
</form> 

The requirement states:

• As a user I should be presented with fields 3 (three) upload fields.
• For each field there should be a corresponding title/name/label
• There should be a "Add more" button, to allow me (the user) to add more images.

The reason for the requirement above is user experience. (Less clicks are required)

The Backend argument

Submitting empty rows (to the server) is "error prone" or is seen as a "validation corner"

The Front-end argument

• Backend should not dictate what the FE can/cannot do.
• JavaScript is very volatile and should not manage/validate whether empty rows should be sent or not

The question

if the user:

• Enters 1 (one) title/label
• Selects 1 (one) image from his/her local PC
• Clicks Upload
• Leaves the last 2 (two) upload fields empty.

So in your opinion/experience with this kind of problem. Should the front end send empty rows or data to the server or not?

Answer 1

I really don't see a problem with empty rows.

Its quite common in forms (and most other user UIs) to have optional fields which are not filled in. The back end should simply ignore the empty rows.

Compare the costs of the two solutions.

Back End ignores empty rows. One if statement and two curly brackets.

Front End filters out empty rows. About forty lines of bug prone JavaScript.

Answer 2

We did something similar several times. We ended up using javascript to add the rows dynamically at to the browser.

The HTML for a row is defined in a javascript variable. When clicking on your "Add new row" button you simply add the html to the dom (by replacing the IDs of the controls).

Then we used AJAX to send the rows to the server. You can simply select all rows when collecting the data to send, by applying a class on them.

You can view a version of this (which I coded) here:
http://carbocount.wikidot.com/project:products:visualization

You can dynamically add new sensors on the fly by clicking on the "+"

Advantages of adding the rows on the frontEnd:

• No postback needed
• Faster performance
• No empty rows get commited

Advantages of adding the rows on the BackEnd:

• Easier coding as you can add it right to the HTML code
• Javascript independent solution