lightning-input-field reportValidity and stop execution

Question

I have an lwc form that consists of a lightning-record-edit-form and some lightning-input-fields

I have to override the submit button with apex as I have to perform some custom logic.

There are some validation rules defined against the lightning-input-field which I am trying to fire using reportValidity() which fires correctly. But after the rule fires, I want to stop execution. This is not happening and the code is still going to apex. How can I stop execution if reportValidity() throws up errors on lightning-input-field?

Here is the code HTML

<lightning-record-edit-form object-api-name={objName} onsubmit={handleSubmit} onsuccess={handleSuccess} record-id={recordId}>

    <lightning-input-field field-name={fieldName} name = {fieldName}  onchange={handleChange}></lightning-input-field>

     <lightning-button variant="brand" type="submit" name="save" label="Submit" onclick={validateFields}>
     </lightning-button>

</lightning-record-edit-form>

JS:

validateFields(event) {
    this.template.querySelectorAll('lightning-input-field').forEach(element => {
                element.reportValidity();
            });

    //check if there is an error. not sure how to check if reportValidity throws an error as the code proceeds to execute apex even when there is an error
        
     let isError = this.template.querySelector(".slds-has-error");
    
    //if no error then only call apex from handleSubmit
     if(!isError) {
            this.template.querySelector("lightning-record-edit-form").submit();
        }
    }

Answer 1

EDIT 2: You can't call validation rules separately from DML operations: Fire Validation Rule from Apex

Please see Trigger Order of Execution: https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_triggers_order_of_execution.htm

If you are attempting to use lightning-record-edit-form as a form to collect valid input without saving to the DB, and then handle it via another Apex class, then you can't do that: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.data_salesforce_write. Instead, create a custom lookup component, use input fields, handle all the logic client side, and then pass the input to your class, otherwise lightning-record-edit-form must save to the database to run "reportValidity" and return Validation Rule errors.

---

Please see the section "Overriding Default Behaviours": https://developer.salesforce.com/docs/component-library/bundle/lightning-record-edit-form/documentation

You'll want to use event.preventDefault() in your custom event handlers and then after all validation succeeds, call the .submit() or custom Apex

EDIT: My mistake, you can't set custom error messages on input-field like you can with input setCustomValidity() see: Lightning Web Component Custom Errors

But, you can handle the errors in a separate component / UI feature -- here I add errors to an array.

customErrors = [];

handleSubmit(event) {
    event.preventDefault();
    this.customErrors = [];
    let isValid = [...this.template.querySelectorAll('lightning-input-field')].reduce( (val, inp) => {
        let inpVal = true;
        // Custom Logic
        switch (inp.fieldName) {
            case 'Name':
                inpVal = inp.value == 'Logic' ? true : false;
                if (!inpVal) { this.customErrors.push('Custom Error'); }
                break;
            default:
                inpVal = true;
                break;
        }
        return val && inpVal;
    }, true);

    if (isValid) {
        this.template.querySelector('lightning-record-edit-form').submit();
        // Validation Rules will run and return errors after the submit / DML operation
    }
}

Answer 2

You need to record the result of all the reportValidity()'s, which you can do easily via the reduce function mentioned in the other answer. Depending on that result, you either throw an error message or submit the save.

handleSave() {
    // If all fields aren't validated, throw error message
    if (!this.validateFields()) {
        const toast = new ShowToastEvent({
            message: "Review all error messages below to correct your data.",
            variant: "error",
        });
        this.dispatchEvent(toast);
    }
    // Otherwise submit save
    else {
        this.template.querySelector("lightning-record-edit-form").submit();
    }
}

validateFields() {
    return [...this.template.querySelectorAll("lightning-input-field")].reduce((validSoFar, field) => {
        // Return whether all fields up to this point are valid and whether current field is valid
        // reportValidity returns validity and also displays/clear message on element based on validity
        return (validSoFar && field.reportValidity());
    }, true);
}