Form - Reset the form validation errors

[Stephan Schrade]

Hi support,
I could not find a way to reset the form validation errors if I have dynamic rules.

I have a form where the rules depend on the setting of a dropdown value.

Adding and removing the rules dynamically works well.
But if an error is is shown and I change the rules and perform a form.validate() afterwards, the errors are still shown.
Is there no easy way to reset the validation error labels?

I'm aware of this thread
https://www.syncfusion.com/forums/181259/how-to-clear-error-messages-using-formvalidator 

But it seems very complicated to do it this way.
You have to find out with every type of input element which dom elements you have to change and you first have to check whether the element is shown or not, before you can remove or change it.

After several hours I ended up with this code (it is called by the change event of the drowdown)

if (typeof(formValidator.element.querySelector('#mailmessage-from').parentElement.parentElement.querySelectorAll('.e-error')[1]) !== 'undefined') {

formValidator.element.querySelector('#mailmessage-from').parentElement.parentElement.querySelectorAll('.e-error')[1].remove();

formValidator.element.querySelector('#mailmessage-from').parentElement.parentElement.querySelectorAll('.e-error')[0].classList.remove('e-error');

};

if (typeof(formValidator.element.querySelector('#mailmessage-bcc').parentElement.parentElement.parentElement.querySelectorAll('.e-error')[0]) !== 'undefined') {

formValidator.element.querySelector('#mailmessage-bcc').parentElement.parentElement.parentElement.querySelectorAll('.e-error')[0].remove();

formValidator.element.querySelector('#mailmessage-bcc').parentElement.parentElement.parentElement.classList.remove('e-error');

};

messagetypeValue = selectType.value;

if ((messagetypeValue == 'newsandmail') || (messagetypeValue == 'mail')) {

formValidator.addRules('mailfrom', {required: true});

formValidator.addRules('bcc[]', {required: true});

} else {

formValidator.removeRules('mailfrom', ['required']);

formValidator.removeRules('bcc[]', ['required']);

}

return formValidator.validate();

In my case the mailmessage-mailfrom is a dropdownlist and the mailmessage-bcc is a multiselect field.
As you can see, every type of element has the be manipulated in a different way.
A method like form.resetValidationErrors() or resetting the errors when calling form.validate() would be very helpful.

Any suggestions how to deal with this?
Greetings, Stephan

[Kundurthi Naga Siddartha Kundurthi Vennela Prasad]

Hi Stephan,

Thank you for reaching out to us. To ensure that validation error messages for dropdown lists and multiselect fields are cleared immediately after a value is selected or validation rules are updated, you can use the FormValidator methods provided by Syncfusion. Instead of manually manipulating DOM elements, you can programmatically reset validation errors and update rules for dynamic scenarios.

Here’s an improved approach using Syncfusion’s FormValidator:

// Initialize FormValidator for your form

let formValidator = new FormValidator('#formId', options);

 

// Update validation rules dynamically based on dropdown value

dropdown.change = function(args) {

  // Update rules as needed

  if (args.value === 'newsandmail' || args.value === 'mail') {

    formValidator.addRules('mailfrom', { required: true });

    formValidator.addRules('bcc[]', { required: true });

  } else {

    formValidator.removeRules('mailfrom', ['required']);

    formValidator.removeRules('bcc[]', ['required']);

  }

  // Reset validation errors for updated fields

  formValidator.reset();

  };

 

Use formValidator.reset() to clear all validation error messages from the form, including those for dropdowns and multiselects.

For more details, refer to the  following documentation - JavaScript (ES5) Form Validator API control - Syncfusion

 

This approach ensures that your form’s validation state is always up-to-date and error messages are cleared automatically when rules change or values are selected. 

 

Regards,

K N Siddartha.

[Stephan Schrade]

Hi,

many thanks for the quick reply.

Unfortunately I can't use formValidator.reset(), because this also resets the values in the form fields and all entries of the user are lost.

Regards,
Stephan

[YuvanShankar Arunagiri]

We’ve further validated your reported query regarding Form Validation and confirmed that the issue arises because removeRules only updates the internal rule set, it does not clean up the UI from previous validations. As a result, when validate method is called again, it skips fields that no longer have rules, but the old error messages remain in the DOM.

To address this, we recommend defining a helper function that manually removes the error messages and CSS classes added by the FormValidator. This ensures a clean slate before adding or removing rules and calling validate method again. This approach is similar to the workaround shared in the initial update.

Please refer to the code snippet and sample link below for implementation details.

function clearValidationErrors(validator) {

    const errorLabels = validator.element.querySelectorAll('label.e-error');

    errorLabels.forEach(label => label.remove());

    const errorInputs = validator.element.querySelectorAll('.e-error');

    errorInputs.forEach(input => input.classList.remove('e-error'));

    validator.errorRules = [];

}

 

function onMessageTypeChange(args) {

    clearValidationErrors(formValidator);

    if (args.value === 'newsandmail' || args.value === 'mail') {

        formValidator.addRules('mailfrom', { required: true });

        formValidator.addRules('bcc[]', { required: true });

    } else {

        formValidator.removeRules('mailfrom', ['required']);

        formValidator.removeRules('bcc[]', ['required']);

    }

    formValidator.validate();

}

Sample link: https://stackblitz.com/edit/jvdqibcv?file=index.html,index.js

Please let us know if you need any further assistance or clarification.

[Stephan Schrade]

Hi,

many thanks for the quick solution.

Works like a charm!

Regards,
Stephan

[YuvanShankar Arunagiri]

You are welcome, Stephan. Please get back to us if you need any further assistance on this.

If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.