2

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>
3
  • 2
    Why don't you try to validate those fields on your controller? Jan 19, 2020 at 19:33
  • Because I want a native form element behavior as intended. Why would I need a controller for that?
    – pvukovic
    Jan 20, 2020 at 1:04
  • I think it gives you more flexibility and control over your require fields, validations, etc. It also allows you to modify the user experience when dealing with errors... I think that the main reason is flexibility... Jan 20, 2020 at 16:37

3 Answers 3

0

Yeah you have to code the validation yourself. The required="true" on a combobox doesn't work at all. To save space remove it and manually code the validation on the JS side.

0

I got around this by manually triggering validation of each lightning-combobox element with element.reportValidity() after the form was being submitted. If after that, any combobox input is invalid (element.validiy.valid), I stop the submit process. The errors will be shown automatically.

// controller
...

handleSubmit() {
  event.preventDefault();
  
  // store validity in variable
  let comboboxValidity = true;
    
  // loop through all combobox elements and manually trigger validation
  this.template.querySelectorAll('lightning-combobox').forEach(element => {
    element.reportValidity();

    // if one element is invalid, set variable to false
    if (element.validity.valid === false) {
      comboboxValidity = false;
    }
  });

  // abort submit process when combobox inputs are invalid
  if (!comboboxValidity) return;

  // ... your submit logic
}
-1

Flexibility would be the ability to have either the component validate itself if it's empty and have a custom validation if necessary to override or replace the standard validation, like... you know, regular input.

Here... there's no Flexibility, the standard validation simply don't EXIST and we had to code our own validation ourselves.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .