1

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.

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.