Can I use Asynchronous Blur Validation with redux-form on a hidden input field?

Question

I have a redux-form specific question.

I have a hidden input in my form:

<input type="hidden" {...field} />

And would like to perform some asynchronous validation by making a request to the server. What is the most elegant/appropriate way to achieve this? I've been looking into Asynchronous Blur Validation, which seems like the right thing except for the fact that a hidden input doesn't seem to be able to trigger a blur event.

EDIT

I managed to get what I wanted by hooking up the following middleware code to Redux:

  if (action.type === ActionTypes.MY_EVENT) {
    MyModule.asyncValidate({
      myField: store.getState().form.myForm.myField.value,
    }).catch((error) => {
      store.dispatch(stopAsyncValidation('myForm', error));
    });
  }

Answer 1

Yeah, asking how to do something when a hidden input blurs is like asking how to do something when your water is dry.

The concept of hidden inputs doesn't really exist in redux-form, as hidden inputs are based on the ye olde HTML way of submitting forms. A "hidden input" in redux-form is just a field that appears in the fields list (so it will be submitted), but that is not rendered to any input. I do this for primary keys, where my fields list is ['id', 'name', 'email'], and I only render inputs for name and email, but all three get submitted.

I think what you want is for your async validation to fire when a rendered (non-hidden) field is blurred, and for all of the fields, even the ones that are not rendered, to be passed to the async validation function. With the example above, something like this would work:

reduxForm({
  form: 'myForm',
  fields: ['id', 'name', 'email'],
  asyncValidate: doServerSideAsyncValidation,
  asyncBlurFields: ['name', 'email'] // both rendered fields will trigger async validation
})