User tests: Successful: Unsuccessful:
JS Form Validation for Subforms/Repeatable Fields Bug IE - Here is the Solution
In IE(11), Fields of a Subform or Repeatable Form dont validate - Seemingly.
Truth is : IE tries to validate the invisible Subform-repeatable part of the subform - which ofc never contains values by its very nature - thus always producing errors
Because Client side form validation is essential. The bug described just exists, because repeatable fields are relatively new and this issue hasn't been addressed yet.
Also the soloution is beautifully simple and implemented in a minute.
Add the suggested line ( see below ) in to the File
/media/system/js/validate-uncompressed.js , circa line 129, right after
if(jQuery(fields[i]).hasClass('novalidate')) { continue; }
ADD the following line / code :
if(jQuery(fields[i]).parents().is("template") ) { continue; }
Explanation :
If a field is directly of indirectly encapsulated into a tag, it is part of the subform's/repeatable-field's template (/reserve) part, BUT NOT the actual form in use - and thus is NOT to be treated as the part of the form in actual use. Thus, if the validator sees the a given field has as direct or indirect/farther parent a element, the validator knows that this field is not part of the form and will skipp validation on this field. Viola.
Simple and beautiful solution.
( Reation of the validator is analogue to the line before, where it makes the validator skipp the field, it it sees a "novalidate" class attached ).
Ofc, the soloution must be transferred into the compressed version ( validate.js ) too.
None.
Pull Request for Issue #24829
3 Lines of Code
Create any Subform. Some of the Fields in the Subform need to have validation required.
( e.g. add a field field of type="email", required="true", validate="email" )
Test in IE(11) by filling the form and trying to submit the form.
You'll get a form error, althou you have entered all fields correctly.
Expected result in form with unfixed file (validate.js) would be, that you can simply submit the form propperly.
Actual result in form with unfixed file (validate.js) is, that you get error messages, althou you seemingly entered everything correctly.
Status | New | ⇒ | Pending |
Category | ⇒ | JavaScript |
Title |
|
Title |
|
2 note:
* it only affect an old EI, so I would not run this hack for every browser, but make some extra check `if (IE and template)`, because of performance * instead of `jQuery(fields[i]).parents().is("template")` use `jQuery(fields[i]).closest("template")`
Great ideas !
I already checked ONE of your suggestions ( .closer() ), which i found great - unfortunately that one has a problem (buggy in Joomla!'s jQuery in IE11).
1.a) Are you shure it only affects an old IE ?
2.a) what's the appropriate line for the IE check ? Im not sure about it. If you have it at hand that'd be great.
2.)
jQuery.closest() WOULD been a great idea, BUT : for some strange reason, it skipps the whole form.
In the end, it seems to be a jQuery based bug anyway in conjunction with IE , evidenced by the behaviour :
sorry, forget what I wrote :)
it more like a workaround, but not a correct fix,
need to looks at subform script to fix IE compatibility for this case.
Please use the following minifier to submit the compressed version.
https://skalman.github.io/UglifyJS-online/
Labels |
Added:
?
|
Please use the following minifier to submit the compressed version.
https://skalman.github.io/UglifyJS-online/
Did now. Hope everything went well.
Closed_Date | 2019-05-18 17:20:58 | ⇒ | 2019-05-18 17:20:59 |
Closed_By | Quy | ⇒ | joomla-cms-bot |
Status | Pending | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2019-05-18 17:20:58 |
Closed_By | ⇒ | Quy |
Set to "closed" on behalf of @Quy by The JTracker Application at issues.joomla.org/joomla-cms/24832
Closing in favor of #24947.
Thanks.
2 note:
if (IE and template)
, because of performancejQuery(fields[i]).parents().is("template")
usejQuery(fields[i]).closest("template")