0

I have a project written in vanilla-JS, it contains 10 forms in different parts of the app. All the forms/inputs are validated via validation.js which checks them for various criteria and prevents submitting if anything is not ok.

Now I want to build the same or similar validation in my new react app, which will also have something like about 10 forms:

I started with Login.js, it has a form with several inputs and is validated directly in the component using onSubmit and local state of the Component. Although it works fine, I don't want to write this validation 9 more times in another components.

Also its not an option to write one Form.js and reuse it everywhere, since almost all the forms look very different and serve different purposes, the only common thing they have: they all need to be validated before submitting.

Anyone advise for my problem? Or maybe a link, where similar question was discussed?

MichaelK
  • 31
  • 4
  • You can use required attribute for input tags and and call form.checkValidity() method in your form's onSubmit event. Do you need any custom validation logic? – Metehan Senol May 08 '19 at 10:21
  • try Formik - don't reinvent the wheel – xadm May 08 '19 at 10:28
  • Yes, lots of custom validtion: Currency, different options for password should be possible, min/max attributes on inputs with date etc. @MetehanSenol: Is there a way in React to create something like a custom checkValidity()? – MichaelK May 08 '19 at 10:46
  • You can look at this article https://medium.com/front-end-weekly/html5-form-validation-in-react-65712f778196 – Metehan Senol May 08 '19 at 10:50
  • Possible duplicate of [Reactjs - Form input validation](https://stackoverflow.com/questions/41296668/reactjs-form-input-validation) – Yilmaz Jun 03 '19 at 00:48

1 Answers1

-1

While HTML5 validations seems sufficient for basic scenarios, Formik (see Formik) covers more complex forms/validation scenarios in react. E.g. if the validation depends on other fields. Worth a look.

Dennis Cieplik
  • 188
  • 11