Parsley.js - Radiobuttons with same name in different forms on same page are validated together

I have searched for almost 2 days now, but can't seem to find an answer to this problem.

On one page I have two different forms (registration, guest checkout). Both use almost the same form elements which then have same name attributes. On submitting, only the current form gets validated and everything works fine for e.g. text input fields.

BUT: Radiobuttons and checkboxes are treated differently by Parsley.js - so on submitting the guest checkout form (which is second in markup) the error messages and classes are added to the registration form. This really only is the case with those two input types.

It seems that Parsley doesn't make a difference to which form those elements belong. It just looks at the name attribute. This is somewhat annoying, especially as there are no problems with other input types sharing same name attributes.

Here is a code snippet for the HTML:

<form id="registrationForm" data-validate-form="true" ...>
    <label>Mrs</label>
    <input type="radio" name="salutation" value="mrs"/>
    <label>Mr</label>
    <input type="radio" name="salutation" value="mr" data-validate-required="true"/>
    <label>Firstname</label>
    <input type="text" name="firstname" data-validate-required="true"/>
</form>

<form id="guestcheckout" data-validate-form="true" ...>
    <label>Mrs</label>
    <input type="radio" name="salutation" value="mrs"/>
    <label>Mr</label>
    <input type="radio" name="salutation" value="mr" data-validate-required="true"/>
    <label>Firstname</label>
    <input type="text" name="firstname" data-validate-required="true"/>
</form>

And here the JavaScript settings:

$('[data-validate-form]').parsley({
    namespace : 'data-validate-',
    errorsWrapper : '<div></div>',
    errorTemplate : '<span></span>',
    errorClass : 'error',
    successClass : 'success'
});

How can I resolve this problem? Oh, and I am not able to change the name attributes.

Solution

So, my colleague and I found a solution for this.

In the handleMultiple method we defined the element's current form and added its ID to the multiple string:

// Add current form id to name to differ between several forms on same page.
var currentForm = $('#' + this.$element[0].form.id);
multiple = currentForm.attr('id') + '-' + multiple;

Then we added currentForm to the input selector like so:

$('input[name="' + name + '"]', currentForm).each(function () {...}

This ensures that only the inputs in the correct form are selected.

Then move to the setupField method. In the definition for _ui.errorsWrapperId we also added the ID of the current form (fieldInstance.$element[0].form.id).

Original:

_ui.errorsWrapperId = 'parsley-id-' + ('undefined' !== typeof fieldInstance.options.multiple ? 'multiple-' + fieldInstance.options.multiple : fieldInstance.__id__);

New:

_ui.errorsWrapperId = 'parsley-id-' + ('undefined' !== typeof fieldInstance.options.multiple ? 'multiple-' + fieldInstance.$element[0].form.id + '-' + fieldInstance.options.multiple : fieldInstance.__id__);

This is necessary to print the error message correctly.