使用 React Final Form 进行自定义验证

Question

I am trying to add some custom validations of allowing only number(amout) in the input boxes. As per the example given on here , I tried to add custom validation.

const onlyAmount = value => {
  if (!value) return value
  let onlyNums = value.replace(/^\$?([0-9]{1,3},([0-9]{3},)*[0-9]{3}|[0-9]+)(.[0-9][0-9])?$/, '')
  return onlyNums
}

and field of my final form is like

<Field
  name="price"
  component="input"
  type="text"
  parse={onlyAmount}
/>

No the problem, its not allowing me to add numbers properly. I read the docs of the but couldn't find any helping solution.

React Final Form : https://github.com/final-form/react-final-form

Any suggestions will be really helpful.

Answer 1

Add just type="number". The keyboard will not allow other than numbers.

Answer 2

type="hidden" seems like a mistake. Won't that result in a <input type="hidden"/> ?

I have not mentally parsed your regex, but I'd recommend you try testing your parse function in that sandbox that you linked to and see why it's not working.

Answer 3

It's your regex. If you add a console to print out your value, then your onlyNum, you get empty string.