[#30461] - [4.0] client side form validation
- Closed
- 2 Feb 2022
- Medium
- Build: staging
- # 30461
In order to have client side validation on a form there are three steps
- JHtml::_('behavior.formvalidator') on the form
<form class="form-validate">on the form- class="validate-password" on the field
In J4 with the introduction of the asset manager we now sometimes see that behavior.formvalidator has been replaced with
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $this->document->getWebAssetManager();
$wa->useScript('form.validate');
A quick check shows that its about 50/50 which version is used. Shouldn't we just use the same code everywhere?
This is completing ignoring the fact that 90% of the forms do not use any client side validation at all so don't need to load any js or have a form class
joomla-cms-bot
- | Labels |
Added:
?
|
||
- Should there just be one method used - if so which one
- Instead of blindly adding it to every form should it not be used just on the forms where there are fields being validated (a very small %)
Do we even need this client side javascript validation at all. Can it not be simply replaced with html5 validation and patterns.
There are only 9 forms that have a field being validated client side by this script. Even though there are about 70 forms which load the js
Use asset manager. JHtml::_('behavior.formvalidator') is now a proxy to it:
joomla-cms/libraries/src/HTML/Helpers/Behavior.php
Lines 60 to 71 in 628eafd
That answers part of the question
I'm with Brian on "Can it not be simply replaced with html5 validation and patterns."
My 2c...
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30461.
I'm gonna shamelessly point out Formally here: https://formally-valid.info/
Why wrap html5 validation in js - I must be missing something
I must be missing something
At least:
- to provide translated messages
- to provide customised messages
- to have better control on the styles
but the list is way bigger...
If you've ever used it then you'd probably knew the weak points, it's not perfect
tbh i am more concerned with the pointless and misleading way it is currently addressed in core by loading validation everywhere when there is nothing to validate
tbh i am more concerned with the pointless and misleading way it is currently addressed in core by loading validation everywhere when there is nothing to validate
FWIW when I introduced the pattern in the validation script the idea was to use it in every form field. Of course, that was a massive workload and I never came around doing the countless PRs needed. There are 2 possible workarounds:
- Remove the validation in all the forms that don't actually use it
- Add all the needed pattern attributes in all the form fields
That is exactly what I am seeking guidance on
I am concerned people think there is validation when there isnt because of the way it has been applied to every form even when not needed AND the two different methods used to add the scripts.
I'm not afraid of hard work but I won't waste my time
So in terms of scripts. JHtml::_('behavior.formvalidator') should eventually move to WebAsset manager (although there's no desperate need to transfer all of them over for 4.0 release - but should be done over the course of 4.x of course).
Validator dates back well before HTML5 (https://developer.joomla.org/joomlacode-archive/issue-23016.html?highlight=WzIzMDE2XQ== introduced the unminified version in 2010). So the reality is yes we probably can ditch it in many places if HTML is sufficient and covers the same functionality and it covers the minimum browser standards we need (I'd imagine it does).
Please don't forget the validator JS is not about security. Any javascript it has to be assumed can be overloaded and manipulated. The validator JS is about giving the users a clean experience pointing out errors ideally before they submit data.
The validator JS is about giving the users a clean experience pointing out errors ideally before they submit data.
In theory HTML5 validation also does that.
At this point this will have to be moved to 4.1
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2022-02-02 08:17:44 |
| Closed_By | ⇒ | brianteeman | |
| Labels |
Added:
No Code Attached Yet
Removed: ? |
||
resolved eleswhere
I can not help on what JS solution is the correct one. I guess this is up to the JS people to discuss. ;)