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.
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.
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.