I’m having trouble with
I created a custom form with several fields, including a phone number validated with regex. That field does not highlight when validation fails.
When I submit the form, the default error message appears, but it doesn’t indicate which field failed.
I removed the validation so it will work, but I can get bad data
Is there any way to customize the error message to indicate which field failed? I do not know what Velo code API would be needed. I could re-check the validation for each field in code, but is there a property for a field that indicates the validation failed?
Working in
Wix Editor
Yes, there’s a property for exactly this. Every $w input element has a .valid property (read-only boolean) plus a more detailed .validity object that breaks down why it failed, e.g. validity.patternMismatch will be true if your regex is the thing that failed.
The piece that’s probably missing is updateValidityIndication(). Setting validationRegex alone doesn’t turn on the red-outline UI, you need to call it on the field (or loop it over all your fields) when the user tries to submit:
if (!$w(‘#phoneInput’).valid) {
$w(‘#phoneInput’).updateValidityIndication();
}
That forces the field to show whatever invalid-state styling you set for it in the Editor’s field settings panel, and it’ll be specific to that field rather than one generic form error. If you want a custom message instead of the default one, onCustomValidation() on the input lets you pass your own reject() text, which is handy for something like “Enter a valid phone number” instead of the generic validation copy.
resetValidityIndication() is worth calling on input/change too, so the red state clears the moment they fix it instead of sitting there until next submit attempt.
Thank you for your quick response, that will do it!
However, the WIX form should do this automatically. I will report this as a bug, but I don’t expect any fix, at least anytime soon.