Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Luke Higgins 22Luke Higgins 22 

Prevent form submission when required field is missing in LWC?

I have a lightning web component with a record-edit-form and a button to submit the form. I am trying to prevent the form submission when a required field is missing, but it's not working properly with just the "required" attribute of the lightning-input-field. This is what I have so far:

component.html 
<lightning-record-edit-form object-api-name="ts2__Placement__c" record-id={recordId} onsuccess={handleSuccess} onsubmit={handleSubmit1}>
            <lightning-messages></lightning-messages>
            <div class="slds-grid slds-gutters">
                <div class="slds-col slds-size_6-of-12"> 
               <lightning-output-field field-name="ts2__Employee__c"></lightning-output-field>
                <lightning-input-field id="onboardingMeth" field-name="Onboarding_Method__c" onchange={handleChange2} value={oboMeth} required></lightning-input-field>
                 <lightning-input-field name="contractorType" field-name="Contractor_Type__c" onchange={handleChange3} value={conType} required></lightning-input-field>
                    </div>
                    </div>
    </lightning-record-edit-form>  
<lightning-button variant="brand" class="slds-m-left_x-small" icon-name="utility:forward" type="submit" icon-position=right label="Submit" onclick={handleNext}></lightning-button>
</template>
component.js 
import { LightningElement , api, track} from 'lwc';

export default class LwcBasicWizard extends LightningElement {
    @api recordId;

handleSubmit1(){
     this.template.querySelector('lightning-record-edit-form').submit();
    }

 
NitishNitish
Hi Luke,

Are you getting any specific error when you are trying to save. Because for me its working fine. I have tried it for contact and made Email field as required and its not letting me save the record. Please find the below code.

Component:- 
<template>
    <lightning-record-edit-form object-api-name="Contact" record-id={recordId} onsubmit={handleSubmit1}>
        <lightning-messages>
        </lightning-messages>
        <lightning-output-field field-name="AccountId"></lightning-output-field>
        <lightning-input-field field-name="Name"> {Name}
        </lightning-input-field>
        <lightning-input-field field-name="Email" required>

        </lightning-input-field>
            <lightning-button
                class="slds-m-top_small"
                type="submit"
                label="Create new">
            </lightning-button>
    </lightning-record-edit-form>
</template>

Controller:- 
import { LightningElement,api } from 'lwc';

export default class RecordEditDemo extends LightningElement {
    @api recordId;

    handleSubmit1(){
        this.template.querySelector('lightning-record-edit-form').submit();
       }
}

Thanks,
Nitish Singh,
Email:- nitishsingh.sfdc@gmail.com