But you are not actually submitting the form, you are running a flow attached to your Next button.
Clientside validation will run on form submit, so set your form button type to submit and remove the flow call from the button.
There is no flow attache to the Next button. The flow is on a the Test button.
Deleted the Test button and the flow. Still the same problem
Sorry my bad, i was looking at the wrong button indeed.
Can you remove the two dynamic events added to the form so we can test it?
Also if you enter ray it will show the error as the name is registered, enter test and it should show the success message, which it doesn’t.
That is because you are using some custom response step there in the server action 
Use set value instead.
But your response text is not a valid JSON
Wrap it in quotes: "success"
As for the dynamic events running before the validation styling is applied maybe @patrick can explain this better.
But your server action is not being called before validation is applied for sure, you can also check this in dev tools > Network > XHR.
You are right. If I remove the dynamic events it all works fine. If I add a dynamic event to catch responses, it all goes belly up. Now calls the invalid function before the validation checks.
I tried to apply a work around using workflow works fine in wappler when I try and test in my browser I get Uncaught (in promise) Error: Action bootbox.alert was not found.
Got this part to work. Had to add bootbox library manually
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.4.0/bootbox.min.js"></script>Validate is definitely broken for me. I uninstalled and re-installed wappler and I still get the same.
Please see the video attached.
validate-is-broken
Hello Ray,
The UI issue is caused by a small typo in our latest version. We will fix this in a minor update later today.
As for your initial quesion:
Your form is NOT submitted to the server actually, if you have validation errors on the client-side. The dynamic event you applied on the form is being executed as your form has validation errors.
The invalid event is from the form, so it triggeres every time your form has validation errors. That’s a standard HTML event. You can learn more about this here:
Also the issue here is more that you are using such a blocking event as a native alert. It just blocks everything that happens on the page. Any other event will run fine and your form validation styles will be added.
If you insist on using such an alert, then you can add a debounce to the form invalid event:
dmx-on:invalid.debounce:1="browser1.alert('alert message')"
so that the validation will be applied. We are going to add the debounce option in the UI in todays update as well.
I just used the alert for testing, you are right, Alerts are a bugger, and I never usually use them. Is there a way to use console.log() so I can see what is happening and monitor responses?
Excellent, thank you. Starting to get my head around when to use dynamic vs static events.
1 Like
All working fine after patch, thanks.
1 Like
This topic was automatically closed after 22 hours. New replies are no longer allowed.