Constraint validation API plugin for Roqueform
Integrates Roqueform fields with the Constraint validation API.
npm install --save-prod @roqueform/constraint-validation-pluginOverview
🔎 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.
import { FieldRenderer, useField } from '@roqueform/react';
import { constraintValidationPlugin } from '@roqueform/constraint-validation-plugin';
export const App = () => {
const planetField = useField(
{ name: 'Mars' },
constraintValidationPlugin()
);
return (
<FieldRenderer field={planetField.at('name')}>
{nameField => (
<>
<input
type="text"
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}
</>
)}
</FieldRenderer>
);
};Get the array of all invalid fields:
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:
planetField.reportValidity();Subscribe to the field validity changes:
planetField.on('change:validity', event => {
event.target.validity;
// ⮕ ValidityState
});