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?
Best Answer
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.