vldx

A Javascript based HTML form validator that's easy to use, reduces API calls, and supports custom rules 📑!
Project still in early stages of development. More features to come soon! 🚀

Table of Contents

• Features
• Getting Started
• Usage
• Example
• Submission
• Advanced Configuration
• Coming Soon

Features

• Reduce API calls by validating HTML fields client-side. 🥳
• Select from a verbose catalog of predefined rules. (More coming soon.)
• Define custom rules.
• Prioritize important rules.
• Javascript-less setup! (Coming soon.)
• Supports Google reCAPTCHA v3.
• Honeypot field for reducing bot spam. 🤖
• Support for CJS and ESM.
• Dedicated developer. 🤓

Getting Started

Installation

npm install vldx

Usage

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-failure or .vldx-success class to allow for styling.

When all fields are valid, and a submission event is received the form data will be sent to your api as a Javascript object. A response listener will update the .vldx-response element when the request has completed.

ESM

import vldx from 'vldx';
let validator = new vldx();

CJS

const vldx = require('vldx');
let validator = new vldx();

If you plan on only using predefined rules this is all the Javascript that is required. (Future versions of vldx won't even require this step, and will rely only on a CDN script tag in your HTML.)

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 .vldx-field.

Your api endpoint is provided in the action attribute of the form.

<form action="https://your.api.route">

To use the base rule set add a data attribute to your inputs: data-vldx-rules=''. Rules are separated with a pipe |.

<input class="vldx-field" data-vldx-rules="required|email" />

Finally, your forms should have a submission button with the class .vldx-submit and optionally a response field with the class .vldx-response.

Example

JS

import vldx from 'vldx';
let validator = new vldx();

HTML

<form class="vldx-form" method="POST" action="https://your-api-route/">
	<!-- Rules are defined with 'data-vldx-rules', and separated by a pipe, on any field with the class 'vldx-field'  -->
	<input type="text" name="name" class="vldx-field" data-vldx-rules="required" />
	<input type="email" name="email" class="vldx-field" data-vldx-rules="email|required" />

	<!-- Submission button -->
	<button class="vldx-submit" data-callback='onSubmit' data-action='submit'></button>

	<!-- Optional response field. Stylized with .vldx-failure and .vldx-success classes -->
	<span class="vldx-response hidden"></span>
</form>

CSS

.vldx-success {
	color: var(--successAccent);
}

.vldx-failure {
	color: var(--failureAccent);
}

.vldx-field\:outline:invalid {
    outline-style: solid;
	outline-width: 2px;
	outline-color: var(--failureAccent);
}

Base Rules

Required

Simply ensures the field has a value.

Email

Requires that the field's value match a basic email regex check.

(Many more coming soon!)

Advanced Configuration

More documentation coming soon!

Honeypot

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.

<input hidden aria-hidden="true" name="bot-field" class="vldx-honeypot"/>

Custom Success 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.

<form data-vldx-success-message="Your custom success message!">

Google reCAPTCHA

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.

<form data-vldx-recaptcha="your-recaptcha-token">

Custom Rules

Documentation coming soon!

Coming Soon

• Many more base rules. (Next update should contain considerable increase to base rules, as well as documentation for custom rules)
• CDN support.
• Improved documentation.