Migration from v1
Upgrade from Formify v1 to v2
Migration from v1
formify-js 2.x keeps everything you used in 1.x working, so upgrading is mostly adding features, not fixing breaks.
What changed
| v1 | v2 |
|---|---|
| JavaScript, no types | TypeScript-first, full types |
useFormValidator(initialValues, schema, onSubmit) | same, plus useForm({ ... }) options object |
4 regex helpers (regexVal) | 20+ validators (V builder + config flags) |
Validation only via validators array | config flags, parameterized rules, custom/async validators |
Regex .test() only | full boolean/message validators, composition (V.all, V.any, …) |
Your v1 code still works
import useFormValidator, { regexVal } from "formify-js";
const formValidator = useFormValidator(
{ email: "", password: "" },
{
email: {
required: true,
requiredMessage: "Please enter Email",
validators: [{ validator: regexVal.email(), message: "Invalid email" }],
},
password: {
required: true,
validators: [{ validator: regexVal.min(6), message: "Too short" }],
},
},
(values) => console.log(values),
);
const { values, errors, touched, handleChange, handleBlur, handleSubmit } = formValidator;useFormValidator also accepts the v2 options object:
const form = useFormValidator({
initialValues: { email: "" },
validationSchema: { email: { required: true, email: true } },
onSubmit: (values) => console.log(values),
});Behavioral notes
- Errors now appear after blur/submit (Formik semantics), not on every keystroke. Set
validateOnChange: trueand checktouchedto keep the v1 feel, or keep showing errors with{touched.x && errors.x && ...}— it now works exactly like Formik. errorsvalues are cleared (removed) instead of set tonullwhen a field becomes valid —Object.keys(errors)reflects real errors only.- The default export is still the hook; named exports were added.
Recommended v2 rewrite
import { useForm } from "formify-js";
const form = useForm({
initialValues: { email: "", password: "" },
validationSchema: {
email: { required: true, email: true },
password: { required: true, minLength: 6 },
},
onSubmit: (values) => console.log(values),
});Half the lines, more rules, and you can now add async checks, plugins, normalization and i18n messages without changing the structure.