onsubmit event not working for Lightning Record Edit Form

Question

According to the Lightning Web Component documentation, https://developer.salesforce.com/docs/component-library/bundle/lightning-record-edit-form/documentation, you should be able to create an onsubmit event and prevent the form from being submitted.

This does not appear to work. Here is a simple component to reproduce the issue.

<template>
  <lightning-record-edit-form object-api-name="Account" onsubmit={handleSubmit}>
    <lightning-input-field field-name="Name" value={value}> </lightning-input-field>
  </lightning-record-edit-form>
</template>

import { LightningElement } from 'lwc';

export default class FormSubmit extends LightningElement {
  value = 'Put cursor here, hit enter';

  handleSubmit(event) {
    event.preventDefault();
    console.log('This is not happening!!!');
    return false;
  }
}

Place your cursor in the field and hit the enter key. The page will refresh, and the handleSubmit function is never invoked.

I feel like I am going crazy here...is this a bug? Is the documentation wrong? Did I miss something obvious? Please help!!!

score 1 · Answer 1 · answered Aug 13 '22 at 18:18

Here is the fix, make sure the form contains a button! That's it!

<template>
  <lightning-record-edit-form object-api-name="Account" onsubmit={handleSubmit}>
    <lightning-input-field field-name="Name" value={value}> </lightning-input-field>
    <lightning-button variant="brand" type="submit" label="Save"> </lightning-button>
  </lightning-record-edit-form>
</template>

Of course, after spending hours upon hours debugging this issue I find the solution 30 minutes after posting this question.

The reason I didn't have a button was that I am using this form for inline edit functionality, and there is no need for a button as I am handling the save separately without the need for the user to click submit. I can simply hide the button with some CSS.

onsubmit event not working for Lightning Record Edit Form

1 Answers1