Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Multiple elements matching 'name' inside the form" error #50

Open
lamontadams opened this issue Dec 17, 2019 · 1 comment
Open

"Multiple elements matching 'name' inside the form" error #50

lamontadams opened this issue Dec 17, 2019 · 1 comment

Comments

@lamontadams
Copy link

Hi there,

I'm using the material-ui flavor of react-form-with-constraints on a form that hosts a react filepond component to allow upload of files. There aren't any validation hooks for this component so it doesn't interact directly with your component in any way I can find. My code handles the onSubmit event to manually verify the filepond component has files, if so, it calls FormWithConstraints.validateForm().

This works just fine until there's more than one file in the filepond component, in which case the error "Multiple elements matching '[name="filepond"]' inside the form" is thrown from the forEach callback inside FormWithConstraints.normalizeInputs:

inputs
                .filter(input => input.type !== 'checkbox' && input.type !== 'radio')
                .map(input => input.name)
                .forEach((name, index, self) => {
                if (self.indexOf(name) !== index) {
                    throw new Error(`Multiple elements matching '[name="${name}"]' inside the form`);
                }
            });

Apparently, filepond creates a dynamic hidden element inside the form for each file that's been added to it. We don't actually need those hiddens because at the point the form's being submitted, we've already uploaded them to temporary storage -- and when I'm done here I'm going to bug the maintainers of that project to see if there's a way to disable that or at least force it to generate unique names -- but in the meantime I'm here to see if there's a way to work around this error from normalizeInputs. Is there or can there be a way to tell it "ignore things with this name because you aren't going to validate them"?

Thanks.

@tkrotoff
Copy link
Owner

tkrotoff commented Dec 19, 2019

Hi,

Try to pass the fields you want to validate to validateFieldsWithoutFeedback() instead of calling validateForm() without arguments.

We could do in the future:

  • remove the checks in production (vs development mode): is this a good idea?
  • add a boolean enableChecks (true by default) to validateForm()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants