0

I have a requirement where I need start date and end date input from user and validate it with a date range and click a create record method which creates a record based on these values.

I have set the min and max attributes on the lightning-inputs and this was working fine and showing validation errors. But when I click on create record it is still accepting the incorrect values and creating record. To avoid this I have added a condition to clear the event.target.value for incorrect dates. This logic is working fine and not allowing to enter incorrect dates but now the standard validations for min & max are not firing. On the UI , it simply not allowing incorrect date values and allowing correct date values without showing any error.

Here is how I coded it:

html:

<lightning-input  type="date" label="Start Date" name="stDateofsecondaryTrade" onchange={secondaryTradeDetailsCapture} min={startdatemin} disabled={disabled}></lightning-input>

<lightning-input  type="date"  label="End Date" name="etDateofsecondaryTrade" onchange={secondaryTradeDetailsCapture} max={enddatemax} disabled={disabled}></lightning-input>

Js:

secondaryTradeDetailsCapture(event) {
        if (event.target.name == 'stDateofsecondaryTrade') {
            
            this.stdate = event.target.value;
            console.log('this.stdate:::'+this.stdate);
            if(this.stdate < this.formatDate(this.delyearstartdate) || this.stdate > this.formatDate(this.delyearenddate)){
                event.target.value='';
            }
            
        }

        if (event.target.name == 'etDateofsecondaryTrade') {
            console.log(this.delyearenddate);
            this.etdate = event.target.value;
            console.log('this.etdate:::'+this.etdate);
            if(this.etdate>this.formatDate(this.delyearenddate) || this.etdate < this.formatDate(this.delyearstartdate))
            {
                event.target.value='';
                console.log('et date should be less than this'+this.formatDate(this.delyearenddate));
            }
        }
}

Before adding the validation logic to clear input value:

enter image description here

After adding the validation logic to clear input value:

enter image description here

Without this error the user will not know if he is selecting the correct date as the input field is showing only dates after min value (1 Oct 2024 in my case) and for any value before this it is simply showing blank. Any suggestions on why the standard validation(in red in the screenshot) is not showing when I'm clearing the invalid input or any other way to handle this.

2 Answers 2

1

If you clear the field's value, the field will revalidate its state. Do not clear the field if you want the error message to persist.

1

You have to use checkValidity and reportValidity functions as explained in the lightning-input documentation as below.

HTML

<template>
    <div class="slds-box slds-theme_default">
        <div class="slds-m-around_medium">
            <lightning-input type="date" label="Start Date" onchange={onStartDateChange} min={startdatemin} required ></lightning-input>
            <lightning-input type="date" label="End Date" onchange={onEndDateChange} max={enddatemax} required ></lightning-input>
        </div>
        <div>
            <center>
                <lightning-button label="Save" onclick={saveDetails}></lightning-button>
            </center>
        </div>
    </div>
</template>

JS

import { LightningElement } from "lwc";
export default class InputValidation extends LightningElement {
    startdatemin = "2023-06-01";
    enddatemax = "2023-06-27";
    startDate;
    endDate;
    onStartDateChange(event) {
        this.startDate = event.detail.value;
    }
    onEndDateChange(event) {
        this.endDate = event.detail.value;
    }
    saveDetails() {
        const isInputsCorrect = [...this.template.querySelectorAll('lightning-input')]
            .reduce((validSoFar, inputField) => {
                inputField.reportValidity();
                return validSoFar && inputField.checkValidity();
            }, true);
        if (isInputsCorrect) {
            //perform success logic
        }
    }
}

enter image description here

You can read more details on reportValidity and checkValidity MDN.

You must log in to answer this question.

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