I created a form and bound it to a sever function.
Created a field an made it required. However, when you leave form field blank and press submit it, the form first connects to the server and then does the validation. The form Is not supposed to submit if a required field is empaty
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.
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.
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:
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?