Validation message does not display until AvField is cleared.

[dainaasim]

I have an AvField component which I'm using to collect the user's email information, and I want to perform custom validation on the email to check if it already exists in the system.
In case it does, I want to provide an error such as "Email already in use", and if it's invalid, I want the error message to be about that instead. I created a function to check the email entered against my database and am passing it to a button next to this field.

This is my code at the moment. Tried to use the validate prop with debounce, also did not work.

<AvField
                                                       name="email"
                                                       id="email"
                                                       type="email"
                                                       placeholder=""
                                                       invalid={this.state.errorMessage && this.state.errorMessage!==""}
                                                       errorMessage="Email invalid or already in use"
                                                       value={this.state.email}
                                                       required
                                                   />

When I click the relevant button for validation, the form field turns red but the error message is not displayed, unless I go in and erase the email entered.