Passing argument to the Field validation?

I am wondering if you could pass arguments to the Field level validation like so:

<Field name="username" type="text"
	component={renderField} label="Username"
	validate={[ required('an argument to this function'), maxLength15 ]}
/>

// The validator
const required = (value, message = 'This is required') => value ? undefined : message;

This would make it easy to customize messages based on the field, without needing to create a validation function which will repeat a lot of code just to have a suiting message.

[erikras]

⚠️ WARNING ⚠️

Beware of doing this:

<Field validate={[isRequired('an argument to this function'), maxLength(15)]}/> ❌

As tempting and elegant as it looks, this will construct a new function every time your form is rendered, which will cause your field to rerender (because this.props.validate !== nextProps.validate).

This is why I specifically defined a single instance of my parameterized validation rules in the example:

const maxLength = max => value =>
  value && value.length > max ? `Must be ${max} characters or less` : undefined
const maxLength15 = maxLength(15) ✅
...
<Field name="username" type="text"
  component={renderField} label="Username"
  validate={[ required, maxLength15 ]}/> ✅

[aniruddhashevle]

I’ve found the solution for this…

let validationObj = {
    required: true,
    type: 'number'
}

<Field
    name='first_name'
    type='text'
    className="input form-flow"
    component={RenderTextField}
    placeholder={field.label}
    validate={[
         (value, allValues, props, name) => {
               let errors = dynamicValidator(value, validationObj);
               return errors;
          }
    ]}
/>

dynamicValidator = (value, validationObj) => {
    //required validation
    if (validationObj.required === true) {
      if (!value) {
        return 'Required'; //Error msg
      }
    }

    //number validation
    if (validationObj.type === 'number') {
      if (isNaN(Number(value))) {
        return 'Must be a number'; //Error msg
      }
    }

     /* And so on... */
   
}

The above implementation shows me the error msg properly for the respective field.

@erikras : Please let me know your thoughts on this.