Custom Validation







Start of documentation contentUse of
Allows custom validation rules in JavaScript with the onValidation
prop.
Use of onValidation
import { Formally, getNodeByName } from 'formally';
<Formally
onValidation={async ({
values,
errors: oldErrors,
hasErrors: oldHasErrors,
formallyData,
}) => {
const newErrors = oldErrors;
let newHasErrors = oldHasErrors;
// First get the Component (aka Node).
// You can use the 'name' attribute as a selector
const dobNode = getNodeByName(formallyData, 'dob');
if (dobNode) {
// Then get the value
const dobValue = values[dobNode.id];
if (typeof dobValue === 'string' && dobValue !== '') {
// Apply custom validation
if (!dobValue.match(/^\d\d\/\d\d\/\d\d\d\d$/)) {
newErrors[dobNode.id] = {
type: 'invalid',
message: '',
};
newHasErrors = true;
}
}
}
return { errors: newErrors, hasErrors: newHasErrors };
}}
/>;