I found when bug was introduced:

This commit had replaced mootools code with jQuery code
763c69f

But also the old mootools code:

var elements = form.getElements('fieldset').concat(Array.from(form.elements));

was replaced with this code that introduced the bug:

$(form).find('input, textarea, select, fieldset, button')

correct one would be:

$(form).find('fieldset').toArray().concat(Array.from(form.elements));

As i said above

• the commit that replaced mootools code for selecting form fields with jQuery code

is simply not equivalent

This PR fixes the issue that was introduced by mootools removal commit:

#10136

@dgt41 could you take a look at this please

I am gonna make a pr with vanilla validation.js and will use @ggppdk code from the comment above.
The idea is to allow html5 pattern tag to be used wherever is set.
Also fix the current jquery version although I think we just replace it with native code. Validation is not doing something extraordinary to need jquery.

I am using this to get all form elements

$form.find('fieldset').toArray().concat(Array.from(form.elements)) ;

Also to get elements on specific container that is added at runtime i am using:

    attachToForm = function(form, container)
    {
        var inputFields = [], elements,
            $form = jQuery(form);

        var elements = typeof container !== 'undefined' && container ?
            jQuery(container).find('input, textarea, select, fieldset, button').toArray() :
            $form.find('fieldset').toArray().concat(Array.from(form.elements)) ;

@dgt41

Currently how do you attach validation to form fields added by JS during user actions ?

i need to override
attachToForm()
in order to do it, see the "container" parameter which is the place at which new form elements were added

I am on my mobile right now but if I remember correctly all you have to do is push the new elements to the relative (form) array. I don't think it's tricky

Also if the events part of #11378 are available then validation can be triggered on each field as the users enters data, which will improve the UX/UI a lot (think of a green tick or a red x depending on the validity of the entered data, in real time).
Although all these can be done with the current jQuery code I think that moving as much javascript to native code will improve Joomla (especially in the long run, e.g. in 1-2 years Bootstrap 5 will be out and guess what? no freaking jQuery!)

About IE8 / IE9 and early versions of IE10 not supporting the form="..." attribute

i am placing the elements back into

<form>
</form>

before submiting, so submiting works for them too

Also it is ok if for these browsers (IE8 / IE9 and ?early? versions of IE10) if validation does not work for fields that use form="..." attribute and are placed outside of FORM tag

just now it does not work for any other browsers (which are 96%)

• luckily Joomla allows overriding the validation JS , so this is not a problem for me,

i am just calling for an improvement for the future

I am gonna make a pr with vanilla validation.js

@dgt41 is a PR coming?

Check https://github.com/joomla/joomla-cms/blob/4.0-dev/media/system/js/fields/validate.js

@dgt41 thanks for Info about Joomla! 4.0

@dgt41 can this Issue be closed?

closed due to lack of response