Trigger validation on component render

[tuok]

Hi there!

Is it possible to validate AvField right after component has been rendered? I'm rewriting UI which gets bogus data every now and then from the database. I would like to point to user right away that some of the data needs attention.

[GoPro16]

Hey @tuok, if you want this functionality you can just submit the form once its rendered by calling the submitForm on the FormCtrl context.

We are working on a re-write to hooks and we will provide a better API for making these modifications but at the moment you can use the native dom.

Maybe create a submit button like this:

const SubmitButton () => {
   useEffect(() => {
      document.forms.<your-form-name>.submit();
   },[]); // runs only on mount
   return(<Button>Submit</Button>)
}

[TheSharpieOne]

The form is always validated when it loads, but the styles are tied to whether or not the input has been "touched". So you could use custom CSS to style the fields which are invalid and have not been touched. (for AvField, the error message is only rendered when touched so CSS will not help there). If you are using AvField, I would get a ref to AvForm and call setTouched on that ref providing the list of input names you want to validate. It will show the errors to the UI without attempting to submit the form (so your onValidSubmit callback would not be called if the form was valid).

Check out: https://stackblitz.com/edit/reactstrap-validation-v2-9hgegg?file=Example.js

[tuok]

Thanks a lot for the comments, I will give these a try!