UX Improvement for DMXValidator

[JonL]

I always use backend validation(if there is a backend). I do this to streamline my validation checks and to avoid duplicating and missing some validation on the frontend. It’s my personal best practice regarding validation. It goes against bootstrap recommendation, but I have my personal opinion on this.

However this doesn’t mean that error message handling in the frontend can’t take advantage of this approach without duplicating on the client side the validation.

Would it be possible to improve the functionality so that the condition that is being checked in the backend is sent to the frontend to make the message disappear once the condition is met?

My use case:

I have a form that validates some fields in the backend on submit. Error messages will be shown correctly in the form. But if I correct the fields the messages will not disappear until a new submit which causes confusion on the end user. Thus why it’s a UX improvement.

This confusion could be avoided if the condition was checked in the backend but also sent to the frontend in the response. This way the frontend could monitor the input to check if the condition is now met before submitting and remove the is-invalid feedback.

I believe it’s not standard for Bootstrap, but it could be a nice UX improvement provided by Wappler.

[Antony]

Jon, would flows provide an easier way for you to do validation on the front end now?

[JonL]

I don’t want to use client side validation
It’s by default with my implementations. Not something specific to Wappler.

[JonL]

A probably “quicker to implement” alternative.

Implement a client action to clear validation message and format on inputs.

That way we could do something like this.

[George]

@JonL have you checked the form validation sync options between the server connect action and the front end form?

Isn’t that enough for you?

[JonL]

I don’t know if I understand you.

Maybe with an example I can explain myself better.

I need this type of behavior -> Validate in the backend and clear messages on input change.
This example comes from Dropbox.

However I have this UX nightmare in my form.

I haven’t found a way to:

a) Clear error message on input change
b) Sync client side error messages with backend expectations without resubmitting.

@George

Isn’t that enough for you?

Even the world is not enough for me