I have added some controls on LWC component. All fields are required as per requirement. I want to highlight only control not label on submit click. Right now with below code it is highlighting both label as well as control. See attached image.
Is there any syntax for getting only input controls in LWC? I have tried querySelector with input tag but it is not working.
const elements = Array.from( this.template.querySelectorAll('lightning-input,lightning-input-field,lightning-combobox'), ); elements.forEach((arrayElement, index) => { if(elements[index].required && elements[index].value===""){ elements[index].className = "error"; } });
This code is working fine for my requirement.
const allValid = [...this.template.querySelectorAll('lightning-input')]
.reduce((validSoFar, inputCmp) => {
inputCmp.reportValidity();
return validSoFar && inputCmp.checkValidity();
}, true);
if (allValid) {
alert('All form entries look valid. Ready to submit!');
} else {
alert('Please update the invalid form entries and try again.');
}
