سلام. من اعتبار سنجی فرم رو با استفاده از کلاس‌ها پیاده سازی کردم.

سوال اولم اینه که تو خط آخر که کلاس رو فراخوانی میکنم، استفاده به این شکل درست هست؟ چون معمولا دیدم که کلاس رو وقتی new میکنن داخل یک متغیر میریزن.

سوال دوم هم اینه که کاربر، با این کلاسی که من نوشتم، وقتی ارور رو ببینه و اصلاحش نکنه و بره روی یک فیلد دیگه، متن ارور پاک میشه (به خاطر متد removePreviousErrors).

چجوری میتونم چک کنم که کاربر حتما ارور رو رفع کرده باشه و اگه رفع نکرده بود، متن ارور پاک نشه؟

class formValidator{
    messages = {
        patternMismatch: () => 'مقدار ورودی با الگو همخوانی ندارد!,
        valueMissing: () => 'این فیلد، اجباری است!',
        tooShort: (target) => `مقدار ورودی، کمتر از ${target.minLength} کاراکتر است.`
    };
    validityKeys = Object.keys(this.messages);
    forms = document.querySelectorAll('form[data-validation]');
    constructor() {
        this.forms.forEach(form => {
            form.addEventListener('input', (e) => {
                const {target} = e;
                this.removePreviousErrors();
                this.checkInputsForErrors(target);
            })
        });
    }
    checkInputsForErrors(target) {
        this.validityKeys.forEach((key) => {
            if (target.validity[key]) {
                this.generateError(target, key);
            }
        });
    }
    generateError(target, key) {
        let error = document.createElement('small');
        error.classList.add('error');
        error.innerText = this.messages[key](target);
        target.parentElement.append(error)
    }
    removePreviousErrors() {
        const errors = document.querySelectorAll('small.error');
        errors.forEach(error => {
            error.remove();
        })
    }
}
new formValidator;