Access.js gives you the right tools to achieve this without even a single line of code,
but only applies basic validations over the fields. If you want to implement your own
logic, it will only require a few more lines of code (pinky promise)#Forms validation
Dealing with forms can sometimes be a bit cumbersome. Dynamic forms? Even more so!
#Using onFormSubmit event
Just like a regular event handler over a forms'
submit event, onFormSubmit allows
you to intercept the entire form and do whatever you want with it, and even raise
errors when needed.In this example (assuming you are using native fetch), we simply use the fields and their
provided values to make a request to our API and process a hypotetical payment.
Now that we know how to get our fields, we can check the validity for some of them:
In our updated example, we achieved two simple checks:
- We checked that the provided username contained an
@char (this is a really basic example, don't do this in production), and if not, raised an error on theusernamefield with a custom message - And we checked that the provided password was over 6 chars long (don't do this in production either), and if not, raised a basic error using only the field name
And returned the errors inside an array. You can either add the fieldKey itself (ie.
password)
or add an object with { fieldKey, message } if you want to display a custom error message.ℹ️ Any value (other than a promise) returned inside the
onFormSubmit event handler will be considered
as an error, so if you don't detect any error inside the form, don't return
anything or return something nullish like an empty array or null.To go even further, we could also take advantage of Promises and return our errors from server-side:
Both
resolve and reject result in a form error if an array with fieldKeys or
objects is provided.#Using Webhooks
Another very handy method to check for fields validity is to use custom Webhooks.
Even if it requires to achieve a network call to your webhook, it comes with a very
important advantage: you can use server-side validation without disclosing your server url.
ℹ️ A Webhook can be any accessible URL from the web that can handle POST requests
To illustrate the use of custom webhooks here, we will create a temporary webhook url over
Webhook.site:
In order to also test to raise an error, we will edit the response given by our
temporary webhook to include the corresponsing field(s):
Once our webhook is ready, we can add it to our dashboard inside
Access > Settings > Third-party integrations:
ℹ️ The webhook url is expected to send a 200 response even when there are fields
errors, 4xx or 5xx response being reserved for real server errors
And once a user fills any of your forms, the webhook will receive a new request:
As we previously edited our webhook to give a
password field error in every
response, you'll be able to see the result of the webhook in your browser's network
tab inside a submit network item: