1

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?

  • 1
    I tend to adopt the approach of "the server should be as flexible as possible with what it accepts and as fussy as possible with what it returns" – RobH Dec 20 '13 at 10:18
3

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.

| improve this answer | |
0

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
| improve this answer | |
  • My arguement is, if there are empty rows sent to the server should the server complain and say you have to send me very strict data. (no empty rows) should be sent at all. – Val Dec 20 '13 at 10:13
  • @Val I would say thats a design philosophy. While I personally would make the server error when sending empty rows and remove the empty rows on the client side, an other company might think different about this – RononDex Dec 20 '13 at 10:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.