Unable to remove "Complete this Field" on Cancel button click from lwc input type

Question

In LWC, there are multiple input fields but input types are combo box & text, and a few of them are required.

Below is the html code

<lightning-combobox
    class ='validateClass'
    data-fieldname={fieldDetail.fieldAPIName}
    data-objname={secVal.objectName}
    name="Picklist"
    label={fieldDetail.fieldLabel}
    value={pickListOptionSelection}
    placeholder="Select"
    options={fieldDetail.pickListOptions}
    onchange={handleChangePickList} 
    required = {fieldDetail.isRequired}>
</lightning-combobox>

<lightning-input class ='validateClass' 
                 data-objname={secVal.objectName}
                 data-fieldname={fieldDetail.fieldAPIName}
                 value={inputData}
                type={fieldDetail.fieldType} 
                variant="standard" 
                name={fieldDetail.fieldAPIName} 
                required = {fieldDetail.isRequired}
                label={fieldDetail.fieldLabel} 
                placeholder="type here..." 
                onblur={handleInputBlur}>
</lightning-input>

On clicking on the Cancel button we have to reset the form. Below is the code that is written on cancel button click.

    //method will call on cancel button click
    handleCancelClick(){
        this.isDatatableVisible = false;
        this.template.querySelectorAll('.validateClass').forEach(each => {
                                                                    each.value = '';
                                                                    if(each.required){
                                                                        each.classList?.remove('slds-has-error');
                                                                        each.className?.replace('slds-has-error');
                                                                    }
                                                                });
    }

I've attached a picture of the issue.

---

I've tried using below code but same issue.

this.template.querySelectorAll('.validateClass').forEach(each => {
                                                                    each.reset();
                                                                });

Answer 1

Once we decide to implement custom validation, everything has to be implemented custom including removing the 'required' attribute, the red asterix and messages. I implemented this custom, considering 2 input text fields and 1 combobox. It is working as per your expected behavior.

HTML

<template>
    <div class="custom-input-container">
        <span class="required-indicator">*</span>
        <lightning-input name='First Input' label='First Input' type="text" class='validateClass'
            message-when-value-missing={completeTheFieldMsg} onblur={validate}>
        </lightning-input>
    </div>

    <div class="custom-input-container">
        <span class="required-indicator">*</span>
        <lightning-input name='Second Input' label='Second Input' type="text" class='validateClass'
            message-when-value-missing={completeTheFieldMsg} onblur={validate}>
        </lightning-input>
    </div>

    <div class="custom-input-container">
        <span class="required-indicator">*</span>
        <lightning-combobox class='validateClass' data-element="combo-box" name='Third Input' label='Third Input'
            options={options} onchange={handleChange} message-when-value-missing={completeTheFieldMsg}
            onblur={validate}>
        </lightning-combobox>
    </div>
    <br>
    <lightning-button name="Cancel" label="Cancel" onclick={onCancel}></lightning-button>

JS

import { LightningElement } from 'lwc';
export default class PageLayoutDetails extends LightningElement {

value = '';
completeTheFieldMsg = 'Complete this entry.'
get options() {
    return [
        { label: 'Select a Value', value: '' }, { label: 'New', value: 'new' },
        { label: 'In Progress', value: 'inProgress' },
        { label: 'Finished', value: 'finished' },
    ];
}
handleChange(event) {
    this.value = event.detail.value;
}

validate(evt) {
    const inputEle = evt.target;
    if (inputEle.value) {
        inputEle.setCustomValidity('');
    }
    else {
        inputEle.setCustomValidity(this.completeTheFieldMsg);
    }
    inputEle.reportValidity();
}

onCancel(event) {
    this.template.querySelectorAll('.validateClass').forEach(inputElem => {
        inputElem.setCustomValidity('');
        inputElem.reportValidity();
        inputElem.value = '';
    });
}

}

CSS

.custom-input-container {
display: flex;
}
.required-indicator {
color: red;
margin-right: 0.2rem;
font-size: 1.2rem;
}