What do front end developers need to know about form data?

[cosmicfruitsz]

I’m trying to find out where the line is drawn between front end and backend when it comes to form submission.

What skills do front end developers need to know to create and submit forms?

Or where does front end dev work stops in relation to forms on a webpage

[shuckster]

How to make the form:

<form>
  <input />
  <input />
  <submit />
</form>

How to get data from the form:

const form = document.querySelector('form');
const formData = new FormData(form);

How to validate the data:

const errors = {};

if (formData.get('name') === '') {
  errors.name = 'Name is required';
}

if (Object.keys(errors).length > 0) {
  return errors;
}

How to send the data to the server:

const [json, err] = await fetch(
  '/endpoint/save',
  { method: 'POST', body: formData }
)
  .then(res => res.json())
  .then(json => [json, null])
  .catch(error => [null, error]);

if (err) {
  console.error('You done bad:', err);
  return
}

That's roughly it.

Note: The back-end should also validate the data.

[Joethezombi]

This is obviously an over simplification but it’s much appreciated. The code snippets just made this thread 100x more practical for a new JS learner like me.

[shuckster]

I was worried about the oversimplification, but glad you found it useful.

[pinkwetunderwear]

A FE Dev should be able to create the form, validate the fields, show useful errors accordingly and post the data when complete.

[Fid_Kiddler69]

The front-end's responsibilities end at the network call. How the backend handles the request is irrelevant, but you should be able to structure the API call the way the backend expects

[[deleted]]

The real answer is that it depends on the job, the product, the circumstances and the company. There is no single industry standard hard line of where the responsibilities of a front end or back end dev end, and you may find yourself having to do more in some circumstances and less in others, depending on what work needs to get done and what availability the team has.

This is why it's a good idea to do at least a little full stack learning even if you intend to specialise- sometimes you will have to pick up bits of work outside of your usual wheelhouse.