Syncing Rails Validations with Formik: A Practical Approach

Source: Dev.to

In many SaaS apps, we allow “placeholder” data during onboarding to reduce friction. But what happens when that data needs to be validated later? I recently tackled this at PostCo by building a bridge between our Rails backend and React frontend.

Key Technical Takeaways

• The Backend Validator: Don’t just rely on presence: true. I created a PlaceholderValidator to check against specific strings like "Address pending" or "00000".
• The Error Bridge: Formik expects a specific shape. I wrote a utility to transform Rails’ errors.messages into a flattened object that Formik can consume, including a case‑mapping layer.
• The UX Trick: If a field has a placeholder, the user shouldn’t have to delete it manually. I implemented a “clear on edit” utility that treats placeholders as "" in the UI, triggering immediate Yup validation.

Handling nested errors is messy, but a little bit of mapping logic goes a long way in making a junior‑built feature feel senior‑grade.