Integrates Roqueform fields with the Constraint validation API.
npm install @roqueform/constraint-validation-pluginIntegrates Roqueform fields with the
Constraint validation API.
``sh`
npm install --save-prod @roqueform/constraint-validation-plugin
š API documentation is available here.
This plugin doesn't require any rendering framework. It subscribes to events that are dispatched by a DOM element passed
to the ref
method. To simplify the usage example, we're going to use the React integration.
`tsx
import { FieldRenderer, useField } from '@roqueform/react';
import { constraintValidationPlugin } from '@roqueform/constraint-validation-plugin';
export const App = () => {
const planetField = useField(
{ name: 'Mars' },
constraintValidationPlugin()
);
return (
{nameField => (
<>
pattern="Venus"
// š” Note that the input element ref is populated.
ref={nameField.ref}
value={nameField.value}
onChange={event => {
nameField.setValue(event.target.value);
}}
aria-invalid={nameField.isInvalid}
/>
{nameField.validatedElement?.validationMessage}
)}
);
};
`
Get the array of all invalid fields:
`ts`
planetField.getInvalidFields();
// ā® [planetField.at('name')]
Show an error message balloon for the first invalid element that is associated with this field or any of its child
fields:
`ts`
planetField.reportValidity();
Subscribe to the field validity changes:
`ts``
planetField.on('change:validity', event => {
event.target.validity;
// ā® ValidityState
});