redux-form: How do I dynamically exclude one sync validator? - reactjs

Question

My redux-form decorated form component conditionally has an email field, depending on my redux state (depending on whether or not the user is a guest.)
I only want to sync-validate that field when it is present (conditionally rendered.) Currently the form's validator includes an email field validator, and this validator runs even when the field has been excluded from the form, during render.
When I "instantiate" the form's validator, and when I pass the validator as an argument to the redux-form decorator, state isn't known. So I'm currently unable to decide whether to include the email field validator, in either of these places.
What's the best way to dynamically include / exclude a single field's redux-form validator, at "runtime" / "validation time", based on state?
MyForm.js
import validate from './MyFormValidator';
// [form class whose render optionally shows the email component]
export default reduxForm(
{
form: 'myForm',
fields,
validate
}
)(MyForm)
MyFormValidator.js
import {createValidator, required, email} from '../../utils/validation';
export default createValidator({
email: [email],
country: [required],
// ...
});
utils/validation.js
export function email(value) {
const emailRegex = /.../i;
if (!emailRegex.exec(value)) {
return 'Please provide a valid email address.';
}
}
export function required(value, message) {
if (isEmpty(value)) {
return message || 'Required.';
}
}
export function createValidator(rules) {
return (data = {}) => {
const errors = {};
Object.keys(rules).forEach((key) => {
const rule = join([].concat(rules[key]));
const error = rule(data[key], data);
if (error) {
errors[key] = error;
}
});
return errors;
};
}
My sync validation is modeled after this implementation, linked to from the 4.2.0 redux-form docs (I'm using 5.3.1): https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/utils/validation.js

Answer 1

Thanks to #lewiscowper who suggested this solution on some JavaScript Slack.
Since the input is a text field, the value will come through as an empty string if the input was rendered.
So if value is null/undefined, we can skip validation for the field, since we know it wasn't rendered.
To avoid false-positive usages of the validator, I renamed it emailUnlessNull.
export function emailUnlessNull(value) {
// Don't validate the text field if it's value is undefined (if it wasn't included in the form)
if (value == null) {
return;
}
const emailRegex = /.../i;
if (!emailRegex.exec(value)) {
return 'Please provide a valid email address.';
}
}
In the end I think a solution that totally excludes the validator --- and doesn't complicate the validator's logic and it's usage --- would be much better, but for now this works.
Happy to accept a better answer.
EDIT:
You also have to make sure that, in the optional-field-render scenario, you also trigger it's value to be an empty string. Before it's been touched, its value comes through the validator as null.
MyForm.js
componentWillReceiveProps(nextProps) {
const { values, fields, isGuestOrder } = this.props;
if (isGuestOrder && values.email == null) {
fields.email.onChange('');
}
}

Answer 2

If you want to consider React-Redux-Form, this is already built-in:
import { Field } from 'react-redux-form';
import { required, email } from '../../utils/validation';
// inside render():
<Field model="user.email"
errors={{ email }}
/>
Two things will happen:
The error validators (in error) will run on every change. You can set validateOn="blur" to modify this behavior.
Validation will only occur if the <Field> is rendered. If the <Field> is unmounted, validation will be reset for that field.