Validation ignores elements outside <form> but with form attribute

[robertmiles3]

Subject of the issue

The plugin does not validate elements that are outside of the <form> but have the form attribute on them.

Your environment

• version of jquery-validate: 1.17.0
• which browser and its version: Chrome 65, macOS

Steps to reproduce

See https://jsfiddle.net/robertmiles3/hpundyj5/4/

Expected behaviour

On submit, validation should fail for both inputs.

Actual behaviour

On submit, validation only fails for the input inside the <form>.

[robertmiles3]

Still valid

[Arkni]

Hi there,

I don't really have the time for working on this issue. Would you or anyone like to add support for this? I'd be more than happy to walk you through the steps involved.

Thanks!

[SimonHeimberg]

not working

The form elements outside of the form

• ❌ are not considered by $form.valid()
• ❌ do not show any validation messages while editing

partial working

• calling $element.valid()
  • ✔️ returns false when invalid
  • ✔️ displays the validation error message
  • ❌ does not delete the old validation error message

proceed?

Are there workarounds?
No idea where to start for fixing. Will probably have some time, but I need some hints.

[SimonHeimberg]

I started on https://github.com/SimonHeimberg/jquery-validation/tree/relatedElementsOutsideForm, but will have to read styleguide, ...

[staabm]

Dont worry about the styleguide. Just submit the PR, in case its working as expected we can fix the CS or at least provide you some guidance

[SimonHeimberg]

pr is #2231
I need help for writing a test. And style maybe too.

[garima2094]

The plugin does not validate elements that are outside of the <form> but have the form attribute on them.

This issue occurred because in the plugin we only find input fields which are the child of form but we did not get all fields which are outside the form but associated with the form.

after analyzing the code I found the solution, at line no. 646 Did small change and it works for me.

// Select all valid inputs inside the form (no submit or reset buttons) return $( this.currentForm ) .find( "input, select, textarea, [contenteditable]" )

Changed above code to this
// Select all valid inputs inside the form (no submit or reset buttons) return $( this.currentForm.elements ) .filter( "input, select, textarea, [contenteditable]" )

and also removed error context from the error function.
errors: function() {
var errorClass = this.settings.errorClass.split( " " ).join( "." );
return $( this.settings.errorElement + "." + errorClass, );
},

Then the plugin validates the input fields which are associated with form but present at outside the form.
Hope it will work for you!!

[staabm]

@garima2094 thx for this information. are you willing to provide a Pull Request and Unit Tests for this feature?

[garima2094]

@staabm Yaa sure
here is the PR
#2261

[ACvijic]

Any news on this?

[buzz100]

Looks like issue is still active in the current release 1.19.1, is their any updates on this.
Thanks

[luis-fss]

I would like to inform you that I am also being affected by this issue.

[shashankdesigner]

Hi
I would like to inform that this triggers same validation error message multiple times on same field.
In this case able to fix this with this extending mixin for validation and then passing errorNewContext as option.

errors: function () {
    var errorClass = this.settings.errorClass.replace(' ', '.');
    if(this.settings.errorNewContext) {
        return $.merge($(this.settings.errorElement + "." + errorClass, this.errorContext), 
                $(this.settings.errorElement + "." + errorClass, this.settings.errorNewContext));
    } else {
        return $(this.settings.errorElement + "." + errorClass, this.errorContext);
    }
}, 

[VMelnalksnis]

Seems like this issue is still relevant in 1.19.3. Both PRs mentioned in this issue seem to be left open with all checks passing and no unresolved comments, is there any plan on reviewing/merging them?

[luis-fss]

@vmtco can you check this, thank you.