1
<lightning:input aura:id="inputField" 
                 type="text" value="{!v.value}" 
                 label="Enter first Name" onblur="{!c.valueChangeValidation}
                 messageWhenBadInput="You must enter a value />

In the Controller :

valueChangeValidation : function(component, event, helper) {
    var inputField = component.find('inputField');
    var value = inputField.get('v.value');
    if(value == ' ') {
        inputField.set('v.validity', {valid:false, badInput :true});
        inputField.showHelpMessageIfInvalid();

    }
}

In lwc with the help of template get query selector we can get the input component. But how do I write inputCmp.set('v.validity', {valid:false , badInput:true}) in LWC??

1
  • 2
    I would think that once you have the component, you call it's validity setter : input.validity = {valid:false , badInput:true}; Mar 30, 2022 at 5:40

2 Answers 2

1

According to the documentation for the lightning-input element, you should be able to use the function setCustomValidity to set a custom error message.

const dateFromInput = this.template.querySelector('lightning-input[data-id="dateFrom"]');
const isValid = this.dateFrom > this.dateTo;
dateFromInput.setCustomValidity(isValid ? "" : "Invalid date");
1
  • To have the field actually display the custom message you would then call dateFromInput.reportValidity(); Sep 1, 2023 at 6:50
0

There are a fair number of gotchas here, so I'm sharing the solution I arrived at. In my scenario, the value of the field is being set as a calculation from other user input fields. Also, it was not possible to set it as a number field because the displayed value included string data (totalHoursDisplay). Doubtless others will have specific scenarios like this which require custom validation.

Salient points include:

  • You need to set the validity object for the state to change
  • The setCustomValidity() method only sets the message, it doesn't change the field's validity state
  • Since validation is firing upon submit, as well as when there is an onchange event on the field, the way I was able to get the validation message to show up was to execute the focus() and blur() sequence
  • Validation will not show up on a read-only field.

My input field HTML is as follows:

<lightning-input
name="totalHours"
data-field="totalHours"
value={totalHoursDisplay}
onfocus={doBlur}
label="Total Hours Entered"
variant="label-inline">
</lightning-input>

<lightning-button label="Submit" onclick={validate}></lightning-button>

The validation Javascript:

  validate() {
    this.totalHoursValidated = this.totalHours <= maxHours;

    let totalHoursField = this.template.querySelector("[data-field='totalHours']");
    if (!totalHoursField) return;

    if (this.totalHours > this.maxHours) {
      totalHoursField.validity = { valid: false };
      totalHoursField.setCustomValidity("The sum is too high.");
      totalHoursField.focus();
      totalHoursField.blur();
    } else {
      totalHoursField.validity = { valid: false };
      totalHoursField.setCustomValidity("");
      totalHoursField.focus();
      totalHoursField.blur();
    }
  }

  // Make the field un-editable while the validation message is displayed
  doBlur(event) {
    let field = event.target.dataset.field;
    this.getField(field).blur();
  }

You must log in to answer this question.

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