#Forms validation

Dealing with forms can sometimes be a bit cumbersome. Dynamic forms? Even more so! 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)

#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 jQuery), we simply use the fields and their provided values to make a request to our API and process an 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 the username field 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 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 use 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

Assuming we removed the validation logic from our previous example and moved it to our webhook, our code is now:
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: