How can I validate fields using useField in react-forms?

Shopify Apps
1

I’m having some trouble with the validation part of useField when utilizing useForm from shopify/react-forms. In a field’s validation, I’d like to refer to a previous fields’ value, and validate on behalf of it’s value.

In the coming example, the second validation function of integerField does not work. I’ve also tried hooking it to a useEffect value containing the same.

const {
    fields: {
      stringField,
      integerField,
    },
  } = useForm({
    fields: {
      stringField: useField({
        value: data?.stringField || 'specific-string',
        validates: [notEmptyString('Please select a price action type')],
      }),
      integerField: useField({
        value: data?.integerField || 10,
        validates: [
          value => {
            if ( value < 0 ) {
              return 'Please enter a valid price';
            }
          },
          value => {
            if ( data?.stringField === 'another-string' && value < 100 ) {
              return 'Please enter a value less than 100';
            }
          }
        ],
      }),
    },
    onSubmit,
  });

Any ideas?

2

I found the solution myself.

const stringField = useField({
  value: data?.stringField || 'specific-string',
  validates: [notEmptyString('Please select a price action type')],
});

const integerField = useField({
  value: data?.integerField || 10,
  validates: [
    value => {
      if ( value < 0 ) {
        return 'Please enter a valid price';
      }
    },
    value => {
      if ( stringField.value === 'another-string' && value < 100 ) {
        return 'Please enter a value less than 100';
      }
    }
  ],
}, [stringField.value]);

const {    
  dirty,
  reset,
  submitting,
  submit,
  makeClean,
} = useForm({
    fields: { stringField, integerField },
    onSubmit,
  });

React.useEffect(integerField.runValidation, [stringField.value]);

Seems like the mix of individually defining the useFields as consts, and also making the integerField reactive to stringField.value makes it work.

Bonus: the last useEffect makes a revalidation when stringField.value changes, instead of waiting untill re-submit