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

[lamontadams]

trafficstars

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]

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