[#39349] - Joomla Javascript form validator doesn't honor all form fields
- Closed
- 3 Dec 2022
- Medium
- Build: 4.2-dev
- # 39349
Joomla Validator script only selects input elements within the form element
https://github.com/joomla/joomla-cms/blob/4.2-dev/build/media_source/system/js/fields/validate.es6.js#L255
https://github.com/joomla/joomla-cms/blob/4.2-dev/build/media_source/system/js/fields/validate.es6.js#L287
but doesn't honor elements outside of the form element using the form="formid" attribute.
Also the validator tries to validate input elements within the form element which have a form="otherform" attribute which point to another form element.
Maybe @Fedik or @dgrammatiko can have a look and suggest a better solution then I can?
Steps to reproduce the issue
https://codepen.io/gicvbqtakshnuxntmv-tmmwj-com/pen/poKQedX
Expected result
only validates relevant input fields
Actual result
- validates input field which doesn't belong to the form
- doesn't validate input fields which belongs to the form but are not in the html subtree of the form element
Additional comments
Suggesting something like:
var formid = 'test1'
const formContainer = document.querySelector('#' + formid);
const matches = document.querySelectorAll(
'#' + formid + ' :is(input, textarea, select, fieldset, button):not([form]), ' +
':is(input, textarea, select, fieldset, button):is([form='+formid+'])'
);
matches.forEach((inputItem) => {
console.log(inputItem)
});
joomla-cms-bot
- | Labels |
Added:
No Code Attached Yet
|
||
what? where? can't find any issue of you where I commented about this
@HLeithner actually form.elements is all is needed there: https://codepen.io/dgrammatiko/pen/vYrQmOz
Also manually querying the inputs will NEVER work on a modern system where you could have a custom element or web component adhering to ElementInternals (participating in the form submission). It would be impossible to query custom elements without a list of known elements. In short use the form.elements which is the proper way getting the form elements...
And there you go: #39350
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2022-12-03 13:41:53 |
| Closed_By | ⇒ | HLeithner |
looks good thanks (sometimes it is really easy ;-)
Hi, unfortunately with this "minor" change previous code that used to work, no longer does. Since elements is only available on a form code like this no longer works:
document.formvalidator.isValid(document.querySelector('.div-inside-a-form'));
We've used this to validate pages of a multi-page form. Now suddenly from 4.2.8 to 4.2.9 this broke...
I understand that maybe the correct thing is to use form.elements, but change like this is maybe for 4.3 release and not for a minor release.
@compojoom please open an issue for that, that sounds like b/c break
It's definitely a b/c break, but I'm not sure what we should do about it. Maybe we just used the formvalidator wrong by passing it a div inside of a form and not a form. But as I said above our use case is - validating fields on a multi-page form. The next pages are just hidden with js. So clicking next validate the current set of visible fields and then displays the next set of fields.
With the introduced change this no longer is a valid use case, but maybe it was never a use case. So it is at the end not a breaking change :D
Right now I just copied the validation script from 4.2.8 and use it instead of the joomlavalidation.
Yeas I agree, just open a new issue with this information, so it not lost.
Later I will look in to it. That should be possible to fix.
@compojoom please test the fix #40230
ffs - i reported fundamental errors like this in the validation script several times several years ago and each time you were one of the people who said it was not an issue. Glad to see you finally get it.