Development of this project stopped when my stack switched; this project is no longer maintained 😥
If you're intersted in expanding feel free to fork or reach out and I'd be happy to help! When I have more time I may look at picking this project back up.
Project still in early stages of development. More features to come soon! 🚀
(More coming soon.)
Start by importing the vldx library into your project.
(CDN support coming soon.)
The default behaviour is to instantiate a class object for each
.vldx-form HTML class on a page; allowing for multiple instances on a single page, but limiting advanced customization options. For more on this see Advanced Configuration.
Fields are validated on receiving a blur event, and again on form submission. Custom validity is set on the DOM Elements. On submission the
.vldx-response element will be populated with the highest priority message and given a
.vldx-success class to allow for styling.
.vldx-response element when the request has completed.
(Future versions of vldx won't even require this step, and will rely only on a CDN script tag in your HTML.)
vldx relies on HTML classes and data to validate your forms. Any form you wish to be validated needs the class
.vldx-form, and inputs require the class
Your api endpoint is provided in the action attribute of the form.
To use the base rule set add a data attribute to your inputs:
Rules are separated with a pipe
Finally, your forms should have a submission button with the class
.vldx-submit and optionally a response field with the class
Simply ensures the field has a value.
Requires that the field's value match a basic email regex check.
(Many more coming soon!)
More documentation coming soon!
To add a honeypot field include the following input element in your form. If the field has any value it cannot be submitted, and will show an error message.
Add a custom success message that will be displayed on the
.vldx-response element after submission. Use the following data attribute on your HTML form.
The first half of Google reCAPTCHA v3 can be handled by vldx, your reCAPTCHA site key is provided via a data tag on your HTML form element, and passed to the api as
g-token as part of the form data.
Documentation coming soon!