How to clear validation icons after form submit success event

[guptast]

Hi,

I have a few forms that have been setup as upsert forms (add new data or update existing data record). Many fields have been setup with validation = required.

When the form is submitted with empty values in required fields, the validation errors are displayed correctly.

But when the form has been submitted successfully with all the required values, the green validation ticks appear in the field value boxes and do not clear until the page has been reloaded.

I have checked and the green ticks appear even when all the required form values have been entered before submitting the form successfully.

This seems to be an issue with the input fields where these have been converted to the tagify component. Is there a way to clear these validation ticks after the form has been successfully submitted? Or is it a bug?

[famousmag]

Hey buddy,

I don't know if it is a bug but It looks weird...
The form, after successfully submitted and form.reset() , it is still open and wait for user input?
Is this a special case?

[guptast]

Hi @famousmag,

There's nothing special about this form except that the form is being used for adding new values and updating existing values.

May be the Tagify component is being re-validated after getting the updated values and as a result the validation tick appears to indicate that the required validation criteria has been successfully validated.

[famousmag]

I mean the form is in a modal or is placed directly in your page?

I just don't understand how the form is submitted successfully, the form is reset and the inputs/tagify contain values.
Have you tried on form success event to form.reset() and then set every individual tagify's value to null or '' (empty string) ?

[famousmag]

What I'm triying to understand is where is your upsert form placed?
In a modal or in a container/column set as DataDetail inside your actual page?

In both cases the form isn't always visible and waiting for user's input for submittion...

So if you follow these steps you described here:

@guptast

My approach is to use a data detail and its bindings to populate the values in a form for updating.

The steps include setting value for the data detail and then show the modal (via inline flows so that the steps run synchronously). The form fields have a binding to the data detail values, so the fields are populated if it is an existing record, otherwise, the field values remain empty.

Then on the success event of the form, I reset and clear the form data, set data detail value to null and hide the modal.

How is posssible the form is still active (waiting for user's input and submission) after it is successfully submitted, reset and obviously datadetail set to null etc...?

[franse]

Dirty way but, you can override it with css:

.form-control.is-valid, .was-validated .form-control:valid {
    border-color: #ced4da;
    background-image: none;
}

That will hide the green tick and the green border