when required fields are missing in lightning-record-edit-form

Question

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

Answer 1

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.

Answer 2

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.