After creating a form and connecting it to the server, I encountered an issue with displaying validation errors below respective input fields. The error message response in case of validation error is as follows: "message": "ValidationError: confirmPassword: Confirm Password did not match". Using regular expressions, I can extract the error message "Confirm password did not match" from this response.
<form>
<h2>Create Account</h2>
<fieldset>
<label for="name">Username</label>
<input
onChange={(e) => handle(e)}
value={data.name}
type="text"
id="name"
name="name"
/>
<label for="email">Email</label>
<input
onChange={(e) => handle(e)}
value={data.email}
type="email"
id="email"
name="email"
/>
<label for="password">Password</label>
<input
onChange={(e) => handle(e)}
value={data.password}
type="text"
id="password"
name="password"
/>
<label for="confirmPassword">Confirm Password</label>
<input
onChange={(e) => handle(e)}
value={data.confirmPassword}
type="text"
id="confirmPassword"
name="confirmPassword"
/>
</fieldset>
<button type="submit" onClick={(e) => sendData(e)}>
Create Account
</button>
</form>
I am seeking a solution on how to properly display this error message below the respective input field within the form structure.