Trigger Async Validation on Custom Button Click

[BryceByDesign]

Is there a way to trigger async validaiton to a field via a custom onClick handler? That way you do not have to rely on the built in asyncValidate hooks such as onBlur, but allow the user to manually trigger validation on certain fields.

Please see onValidate prop below.

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

const asyncValidate = (values/*, dispatch */) => {
  return sleep(1000) // simulate server latency
    .then(() => {
      if ([ 'john', 'paul', 'george', 'ringo' ].includes(values.username)) {
        throw { username: 'That username is taken' }
      }
    })
}

const renderField = ({ input, label, type, onValidate, meta: { asyncValidating, touched, error } }) => (
  <div>
    <label>{label}</label>
    <div className={asyncValidating ? 'async-validating' : ''}>
      <Link onClick={onValidate}>Validate</Link>
      <input {...input} type={type} placeholder={label}/>
      {touched && error && <span>{error}</span>}
    </div>
  </div>
)

const AsyncValidationForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field name="username" type="text" component={renderField} label="Username" onValidate={asyncValidate}/>
      <Field name="password" type="password" component={renderField} label="Password"/>
      <div>
        <button type="submit" disabled={submitting}>Sign Up</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
      </div>
    </form>
  )
}

[BryceByDesign]

I believe I may have missed the part of the documentation where you can trigger the redux-forms Action Creators such as startAsyncValidation('form-name') here. However, with async validation we cannot compare nextProps with what the form state was before the current field was edited. So validation always triggers.

I will look into asyncValidation on a specific field only when values have changed and test the above action creator and report back unless anyone has insight. Thanks!

[ifunk]

I think you might be looking at the wrong repo? This is react-forms not redux-form