How can one validate 'recordEditForm' fields before submitting them to the platform?
Here's a way that you can achieve this. Let's say I have the component as below. There's a field for Title, which is hidden when the component is rendered (and your use case is to enable that). This approach also makes sure that all your standard validations are taken care of, viz., required fields, email formatting (in the example below).
Component:
<lightning:recordEditForm aura:id="editForm" recordId="xxxx" objectApiName="Contact" >
<lightning:inputField aura:id="firstNameField" fieldName="FirstName" />
<lightning:inputField fieldName="LastName" />
<lightning:inputField fieldName="Email" />
<lightning:inputField aura:id="titleField" fieldName="Title" class="slds-hidden" />
<lightning:button class="slds-m-top_small" variant="brand" name="update" label="Update" onclick="{!c.onSubmit}"/>
</lightning:recordEditForm>
Controller JS:
onSubmit : function(component, event, helper) {
var firstName = component.find("firstNameField").get("v.value");
// perform validations as required based on the value retrieved
if(firstName === "xyz") {....}
var titleField = component.find("titleField");
$A.util.addClass(titleField, 'slds-visible');
// based on the validations, invoke the below to submit the form
//component.find("editForm").submit();
},
Few things to take care of on the component/JS are as below:
- Assign an id to the lightning:recordEditForm
- Associate a onclick event and function to the button used to save the form (if you are using a lighting:button as with type="submit" to submit the form, you may like to remove that)
- Perform any validations that you need in the controller function associated to the button viz., showing/hiding the element and submitting the form by getting the aura:id associated to recordEditForm and invoking a submit() (you can use submit() call if in edit mode) or call an apex aura method for any additional server side handling
- If the form is utilized for "edit" operations, provide a recordId to associate a record in lightning:recordEditForm. If the form is utilized for "create" operations, do not provide any recordId attribute, and you will get a new form to submit the input.
- To retrieve value entered on any input field, associate an aura:id and retrieve it's value in the JS as in the example