validation-enhancer - npm
npm
Search<br>Sign UpSign In
validation-enhancer
1.0.3 • Public • Published 2 months ago<br>Readme<br>Code Beta<br>0 Dependencies<br>0 Dependents<br>4 Versions
" href="#validation-enhancer">
The easiest, most lightweight validation system.
npm install validation-enhancer<br>yarn add validation-enhancer
Try the LIVE DEMO !
Enhance
Wrap any HTML form in to enhance its validation.
is a web component that brings native HTML validation to life - with the UX you want right out of the box
is the same thing, but zod validates the form
Easy to Use!
Literally just wrap a form in
Or wrap a form in and pass your zod schema to setZodSchema()
Great UX!
Displays error messages next to each input
Shows errors on focus out and submit
Clears errors immediately when the user corrects their input
Works with screen readers out of the box
Focuses the first invalid field on submit, and scrolls to its label
Progressive enhancement as standard - in the event of an error browser html validation will still function
Customisable!
Adds .valid / .invalid CSS classes on inputs as the user interacts, you control the style
Custom error messages in HTML attributes
Completely customisable validation using setCustomValidity()
Validate custom elements too!
Step 1
Wrap around your form
validation-enhancer><br>form>
label for="email">Emaillabel><br>input type="email" id="email" required />
button type="submit">Submitbutton><br>form><br>validation-enhancer>
Step 2
Assign each input an error display element using the aria-errormessage attribute
validation-enhancer><br>form>
label for="email">Emaillabel><br>input type="email" id="email" required aria-errormessage="email-error" /><br>div id="email-error">div>
button type="submit">Submitbutton><br>form><br>validation-enhancer>
Step 3
Style .valid, .invalid, and the validation message.
.valid {<br>border-color: green;
.invalid {<br>border-color: red;
Done!
That's all it takes to enhance your form!
validation-enhancer><br>form>
label for="email">Emaillabel><br>input type="email" id="email" aria-errormessage="email-error" required /><br>div id="email-error" style="color:red">div>
button type="submit">Submitbutton><br>form><br>validation-enhancer>
style><br>.valid {<br>border-color: green;
.invalid {<br>border-color: red;<br>style>
script type="module" src="validation-enhancer.min.js">script>
Zod integration
Use a Zod schema as the single source of truth for validation. The zod schema will override any HTML attributes.
validation-enhancer-zod><br>form>
label for="email">Emaillabel><br>input type="email" name="email_field" required aria-errormessage="email-error" /><br>div id="email-error">div>
button type="submit">Submitbutton><br>form><br>validation-enhancer-zod>
script><br>import { z } from "zod";
/* Define Zod Schema */<br>const schema = z.object({<br>/* Reference inputs by name attribute */<br>email_field: z.string()<br>.min(1, "Email is required.")<br>.email("Please enter a valid email address."),<br>});
/* Run when the script is loaded */<br>customElements.whenDefined("validation-enhancer-zod").then(() => {<br>const validationEnhancerZod = document.querySelector("validation-enhancer-zod");<br>validationEnhancerZod.setZodSchema(schema);<br>});<br>script>
Inputs are matched to schema fields by their name attribute — inputs without a name are skipped by zod validation.
Use getZodSchema() to read back the current schema.
Install
npm install validation-enhancer<br>yarn add validation-enhancer
Import
import "validation-enhancer";<br>import "validation-enhancer-zod";
Or copy dist/validation-enhancer.min.js into your project and load it directly:
script type="module" src="validation-enhancer.min.js">script><br>script type="module" src="validation-enhancer-zod.min.js">script>
Custom errors
input<br>type="email"<br>id="email"<br>required<br>aria-errormessage="email-error"<br>validation-valueMissing="An email address is required."<br>validation-typeMismatch="That doesn't look like a valid email."
Override the browser's default validation text by adding attributes that match validity state keys. Both validation-* and data-validation-* forms are accepted.
Attributes are checked in the following order, to mimic default browser behaviour. Bare attributes are checked before data- attributes.
Attribute<br>Triggered when
validation-valueMissing<br>Required field is empty
validation-typeMismatch<br>Value doesn't match type (eg email)
validation-patternMismatch<br>Value doesn't match pattern
validation-tooLong<br>Value exceeds maxlength
validation-tooShort<br>Value is shorter than minlength
validation-rangeUnderflow<br>Number is below min
validation-rangeOverflow<br>Number is above max
validation-stepMismatch<br>Number doesn't match step
validation-badInput<br>Browser can't parse the input
If no custom message is set, the browser's built-in validationMessage is used.
gets its error messages from the zod schema instead.
Custom message prefix
The default prefix is "validation". Change it with the message-prefix attribute to avoid conflicts or match your own naming convention:
validation-enhancer...