[4.0] component config form not saving when validation fails on empty field

[Ruud68]

Steps to reproduce the issue

In order to be able to reproduce this follow the below instruction (otherwise I had to create a component that needed to be installed).

1. in ./administrator/components/com_content/config.xml add the following field:

<field name="email" type="text" pattern=".*@.*\..*" label="TESTFIELD" description="" />

2. in the back-end of the j4 site goto articles options
3. leave the TESTFIELD empty
4. click [save] button

Expected result

Configuration should save (TESTFIELD is empty and NOT required)

Actual result

save action throws error:

The form cannot be submitted as it's missing required data.
Please correct the marked fields and try again.

System information (as much as possible)

J4 dev 8 (nightly)
PHP 8.05
mysql 8.0.25

Additional comments

saving with this field and (empty) value works correct in J3

[brianteeman]

Could you check that the problem is not the pattern. ie its trying to check if the empty value matches the regex in the pattern

[Ruud68]

the pattern works in J3 (saving with empty value gives no error) and gives this behavior in J4, so the issue is not in the pattern, but in the handling of the pattern

[brianteeman]

I am surprised it works in j3 because the pattern is a validation rule and an empty field doesnt match the pattern

[brianteeman]

anyway if you use type=email then the browser does it for you

[Ruud68]

anyway if you use type=email then the browser does it for you

sure, but this is an example of what seems like a B/C. There are patterns developers use that are not in the type list :)

[brianteeman]

unless I am very much mistaken html5 pattern validation is done by the browser not joomla

[Ruud68]

You are mistaken (sorry), issue is in validate.js
it validates against the pattern only when length of the field is not 0
if length is zero it checks if it is required (which it isn't)
then it should return true, but it return false (where the validation in J3 correctly returns a true)

because it returns a false, the error is thrown.

So somebody with knowledge of JS should have a look at line 685 of file ./media/system/js/fields/validate.js

[Ruud68]

pattern=".*@.*\..*"

Is this only a test or are you using something with this regex in real life? It would not be valid, as phil@myInternalServer is a valid email address and would fail that pattern.

this is just a simple test to show the B/C issue with J4 form field validation :) #noworries

[joomdonation]

Closing as there is PR #34124.