TransWikia.com

Lightning-input date when marked required is showing required error after date selection

Salesforce Asked by Oran Jacob on October 4, 2021

The problem is that the date input life cycle is as such:

  1. onfocus on input brings up the date picker
  2. on date selection it will populate the date on the input
  3. onblur will be called with validation check (by that time the onchange hasn’t kicked in yet)
  4. required error shows (because the on change hasn’t happened yet and the value is not updated)
  5. onchange event is called and updates value
  6. onblur removes the error because now it has a value

here is what I mean:

enter image description here

here is my markup:

<lightning-input type="date" name="input5" label="Required date field" required ></lightning-input>

here is a gif:

enter image description here

any workarounds or suggestions how to call onchange before validation occurs ?

One Answer

You can use reportValidity() function to report validity on change.though dont know why is it happening.

  <template>
    <lightning-input
    type="date"
    required
    name='input1'
    message-when-value-missing="This field is required"
    label="enter date"
    onchange={handleChange}
    ></lightning-input>
</template>

and in js

   handleChange(){
        console.log('change event');
        var inp=this.template.querySelector('lightning-input');
        if(inp.name='input1'){
            inp.reportValidity();
        }
    }

Correct answer by User6670 on October 4, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP