?
avatar ggppdk
ggppdk
6 May 2016

Steps to reproduce the issue

<form ... id="form-id-1" class="form-validate"/>
  <input form="form-id-2"   type="text" name="jform_field_a" class="required" />
  ...
</form>

<input  form="form-id-1"   type="text" name="jform_field_b" class="required" />

Expected result

Field: jform_field_a is not included in the validation
Field: jform_field_b is included in the validation

Actual result

Neither of the above is happening

System information (as much as possible)

any

avatar ggppdk ggppdk - open - 6 May 2016
avatar ggppdk
ggppdk - comment - 6 May 2016

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));
avatar ggppdk ggppdk - change - 6 May 2016
Title
Validation JS does validate all form fields but it can try to validate fields of other forms (not HTML5-compliant)
Validation JS does NOT validate all form fields and it can try to validate fields of other forms (not HTML5-compliant)
avatar ggppdk ggppdk - change - 6 May 2016
Title
Validation JS does validate all form fields but it can try to validate fields of other forms (not HTML5-compliant)
Validation JS does NOT validate all form fields and it can try to validate fields of other forms (not HTML5-compliant)
avatar ggppdk ggppdk - change - 6 May 2016
Title
Validation JS does NOT validate all form fields and it can try to validate fields of other forms (not HTML5-compliant)
Validation JS does not validate all form fields if placed outside FORM tag and it can try to validate fields of other forms if inside the FORM Tag
avatar ggppdk ggppdk - change - 6 May 2016
Title
Validation JS does NOT validate all form fields and it can try to validate fields of other forms (not HTML5-compliant)
Validation JS does not validate all form fields if placed outside FORM tag and it can try to validate fields of other forms if inside the FORM Tag
avatar brianteeman brianteeman - change - 7 May 2016
Category JavaScript
avatar brianteeman brianteeman - change - 8 May 2016
Labels Added: ?
avatar ggppdk
ggppdk - comment - 14 May 2016

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

avatar brianteeman
brianteeman - comment - 5 Aug 2016

@dgt41 could you take a look at this please


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/10259.

avatar dgt41
dgt41 - comment - 5 Aug 2016

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.

avatar ggppdk
ggppdk - comment - 5 Aug 2016

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)) ;
avatar ggppdk
ggppdk - comment - 5 Aug 2016

@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

avatar dgt41
dgt41 - comment - 5 Aug 2016

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

avatar dgt41
dgt41 - comment - 5 Aug 2016

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!)

avatar ggppdk
ggppdk - comment - 5 Aug 2016

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

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 30 Jan 2017

I am gonna make a pr with vanilla validation.js

@dgt41 is a PR coming?

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 30 Jan 2017

@dgt41 thanks for Info about Joomla! 4.0

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 6 Apr 2017

@dgt41 can this Issue be closed?


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/10259.

avatar joomla-cms-bot joomla-cms-bot - change - 6 Apr 2017
The description was changed
avatar joomla-cms-bot joomla-cms-bot - edited - 6 Apr 2017
avatar franz-wohlkoenig franz-wohlkoenig - change - 6 Apr 2017
Status New Information Required
avatar brianteeman
brianteeman - comment - 21 May 2017

closed due to lack of response

avatar brianteeman brianteeman - change - 21 May 2017
Status Information Required Closed
Closed_Date 0000-00-00 00:00:00 2017-05-21 15:22:52
Closed_By brianteeman
avatar brianteeman brianteeman - close - 21 May 2017

Add a Comment

Login with GitHub to post a comment