2

When required fields are missing in lightning-record-edit-form does it call any javascript method when clicked on submit button? I checked 'onsubmit' and 'onerror' it didn't call either of them. How can i call a javascript method if any required fields are missing in the lightning-record-edit-form when a user clicks on submit btn.

Example

<template>
    <div class="slds-p-bottom_large slds-p-left_large" style="width:500px">
    <lightning-record-edit-form object-api-name="Account">
        <lightning-messages></lightning-messages>

        <lightning-input-field required field-name="CustomField__c">
            </lightning-input-field>
        
        <lightning-button type="submit"
                          name="submit"
                          label="Create Account">
            </lightning-button>
    </lightning-record-edit-form>
    </div>
</template>

Say CustomField__c is not provided and we click on submit button it should call certain js method.

Thanks

2

I 100% agree that being unable to populate defaults or add any logic for submission before required fields checking is performed should be supported, but it isn't.

I raised this with the Salesforce product manager responsible for the lightning component implementations and got the response "I completely understand -- however, record-form was designed to be an out-of-the-box easy way to do a form that doesn't need any special handling. I'm looking into other possibilities, but don't currently have a timeline." back in August last year.

If you want to do this sort of thing you have to write your own component, unfortunately.

2
  • you mentioned "record-form" in the product manager's response, and I agree that lightning-record-edit-form is very a pre-configured, no-customization-needed-or-allowed component, but did the PM discuss "record-edit-form", which is supposed to be more customizable (and was the focus of OP's question)? Feb 22 at 19:29
  • 1
    The discussion I had with the PM was focused on the record form, since I wanted to benefit from using the layout to define the inputs, but the two components suffer from the same lack of ability to intercept and change field values during submission which is what the OP was asking about. I am aware that the edit form does support pre-populated fields as long as you are happy to write more code.
    – Phil W
    Feb 22 at 22:43
0

You can add an onclick event to your lightning-button so that it calls a handler on click (while also propagating the submit event up the hierarchy). Generally I would avoid this because it can be a bit confusing to deal with but it would allow you to add custom logic from clicking submit.

<lightning-button 
  type="submit"
  onclick={handleSubmitClick}
  name="submit"
  label="Create Account">
</lightning-button>
handleSubmitClick(event) {
    // put your custom logic here
    if(!isValid) {
        event.preventDefault(); //stop the submit event
    }
    // or let it propagate 
}

Another option is to use lightning-button type="button" with a click handler and then call the submit method on the lightning-record-edit-form under the conditions you desire.

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.