Joomla-cms: [4.0] [com_fields] UX Improving Validation Process of Form Fields in Favour of Custom fields

[coolcat-creations]

In Custom Fields there are fields that could actually be solved by a simple text-input field with validation options.

That are:
E-Mail
Telephone
URL

1) The user has to consult the documentation to know which scheme this fields are using.
2) Schemes can be different depending on the region
3) The validation error only throws "invalid field" the enduser has no clue why it could be invalid
4) The validation of a field might be better customized, like "alphanum" "regex" "alpha" "num" ... whatever ;)
5) The validation error should be customizeable too like "Please write in your company name"

If we don´t exchange this fields NOW with a validation process we will have to keep them because of B/C breaks. And IMHO this fields are "cluttering" the fieldoptions and make a bad UX.

[dgrammatiko]

@coolcat-creations we can start use patterns for validation, https://github.com/joomla/joomla-cms/pull/13094. This way every custom field could have a specific validator.

The validation error should be customizeable too like "Please write in your company name"

With the current validation this is impossible, unless we modify the script...

[coolcat-creations]

Maybe we should consider a language change then for the errors."Invalid field" says nothing in that case ;)

[ralain]

Email, tel and url fields can not just be replaced by a simple text input field. They are particularly important for UX on mobile devices, as they enable custom keyboard layouts tailored to the specific input types.

I do agree on your sentiment regarding validation. IMO the Telephone field should not be validated by default, validation should be actively enabled by the site builder with a pattern of their choosing.

[dgrammatiko]

Can someone redo this: https://github.com/joomla/joomla-cms/pull/10994
It's one of the layouts that don't use yet jlayout

Can we have some tests: https://github.com/joomla/joomla-cms/pull/13435

[ggppdk]

---

1. In large forms displaying the invalid messages only on top of the form is problematic
   UX needs to be improved and behave like HTML5 validation
2. focus on 1st invalid field
3. for it (1st invalid field) display the invalid message "Field required" or "Field invalid" or "custom message" either injected inline or as popOver (to resemble HTML5)

---

1. The custom invalid message is simple to add with data-attributes,
   but what that will be to avoid future conflicts ?
   e.g. are the following good ? what are popular frameworks use ? is there something similar in HTML5 (besides 'title'?)

data-required-error="This field must be empty"
data-pattern-error="Please only use only alphabetic characters and numbers"

what about adding support for the above to Joomla's validate.js ?

[coolcat-creations]

What is the status here? Will custom validation be possible with custom error messages?

[brianteeman]

Please retag this for J4