Browsers will prevent the form from submitting if there are any required input fields. This works well with lightning:input
- the form won't submit until the fields with required=true are filled. However, setting this attribute on lightning:combobox does nothing - the form submits with an empty field.
Here is a component example with two fields in the form. Both are required. The form won't submit until you complete the Name field (lightning:input
) but it will submit even if the Language field is left blank (lightning:combobox
).
Any ideas on how to solve this without resorting to Java Script validation?
<aura:component access="global">
<aura:attribute name="languageOptions" type="List" default="[
{'label': 'English', 'value': 'English'},
{'label': 'French', 'value': 'French'},
{'label': 'Chinese', 'value': 'Chinese'},
]"/>
<form onsubmit="{!c.handleSubmit}">
<lightning:input required="true" label="Name" name="name" />
<lightning:combobox required="true" label="Language" options="{!v.languageOptions}"/>
<lightning:button variant="brand" type="submit" name="save" label="Save" />
</form>
</aura:component>