Validation titles appearing in form - don't want them

I have a contact form I’ve created, with a handful of text input fields. Some of them are required to be filled out.

I’ve tested and refined them, they’re working well, with one problem: Wappler is showing the red “This field is required.” title above each field now, in the live (online) version, and in the Design view even when the form hasn’t been used. And worse, injecting the “This field is required.” title messes up the tight form spacing I’ve designed.

Interestingly, the “Required” title goes away when I toggle off App Connect mode… but on the live version, those “Required” titles are still there.

I’ve tried removing the validation, the title is still there. I’ve tried removing the “Message” field for the Required validation rule, still shows up. Attached is a screen with these titles there, for good measure.

Any idea how to get those removed from the Design view, and from the site? I’d prefer to have ticks for validation, which wouldn’t affect the text entry spacing on the form (if I have a choice), but regardless, need to prevent these titles from appearing and affecting the layout / spacing of the form elements.

Thanks in advance for any suggestions!

For context, here’s how it should look, how I want it to look, and how it appears in Design mode when the “App Connect” mode is toggled off:

contact how it should look

Do you by some chance have auto-submit checked by accident on your form server action?

1 Like

Hah! Yes I did. Unchecking that seems to fix it. I’ll do some more testing (put the validation back, but leave that Auto Submit unchecked) to make sure it’s all good. Thank you @brad!

1 Like

Good luck with your project! :slight_smile:

Well, that mostly helped (thank you Brad). The initial form / modal appears as it should. But as soon as I submit it, or even click the CLOSE button, any time the form is brought up subsequently, the spacing is messed up still - though the red text (“This field is required”) does not show up.

Interestingly, I’ve removed all validation from the form, and removed all validation commands from Run / Flows. So… not sure why it’s doing that now. Might be an edge case (hitting the contact form more than once) but it doesn’t have the polish I want - should be a good tight modal / form each time.

Suggestions welcome…

Hello all,

I’m still not able to solve this problem. The validation titles no longer appear, however, as soon as the form is closed without being completed, the strange spacing is applied, and remains that way on the form. I have four forms for the website, this occurs on all of them.

I’ve removed all validation from the form too (I was validating the email address, removed that to see if it worked). How can I fix this? It’s not a good user experience, and makes the site look sub-par.

Hoping I can get a resolution, and thanks in advance for any help. Attached is an animated GIF showing the behavior. Note that it occurs as soon as Close is clicked.

What if you remove these lines from your code?

	<link rel="stylesheet" href="/dmxAppConnect/dmxValidator/dmxValidator.css">
	<script src="/dmxAppConnect/dmxValidator/dmxValidator.js" defer=""></script>

Yes! That did the trick! I probably should’ve figured that out on my own… seems obvious now.

Once again, thank you for the quick and expert help @brad !

1 Like