diff --git a/README.md b/README.md index 1197fe4..dcabd3c 100644 --- a/README.md +++ b/README.md @@ -156,35 +156,35 @@ The step size between the `min` and `max` values. If invalid, the `stepMismatch` The message to display [when the input is invalid somehow](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#suffering-from-bad-input). -#### `patternMismatch?: string` +#### `patternMismatch?: string|(value?: any, props: Object) => string` The message to display when the value does not match the pattern specified by the `pattern` prop. -#### `rangeOverflow?: string` +#### `rangeOverflow?: string|(value?: any, props: Object) => string` The message to display when the value is higher than the `max` prop. -#### `rangeUnderflow?: string` +#### `rangeUnderflow?: string|(value?: any, props: Object) => string` The message to display when the value is lower than the `min` prop. -#### `stepMismatch?: string` +#### `stepMismatch?: string|(value?: any, props: Object) => string` The message to display the value is not one of the valid steps specified by the `step` prop. -#### `tooLong?: string` +#### `tooLong?: string|(value?: any, props: Object) => string` The message to display when the value longer than the value specified by the `maxLength` prop. -#### `tooShort?: string` +#### `tooShort?: string|(value?: any, props: Object) => string` The message to display when the value shorter than the value specified by the `minLength` prop. -#### `typeMismatch?: string` +#### `typeMismatch?: string|(value?: any, props: Object) => string` The message to display when the value does not match the `type` prop. -#### `valueMissing?: string` +#### `valueMissing?: string|(value?: any, props: Object) => string` The message to display when the value is required, but missing. diff --git a/src/Html5ValidationField.js b/src/Html5ValidationField.js index e6a75f7..5a05df2 100644 --- a/src/Html5ValidationField.js +++ b/src/Html5ValidationField.js @@ -80,7 +80,10 @@ export default class Html5ValidationField extends React.Component { return validity.customError } const errorKey: ?string = errorKeys.find(key => (validity: Object)[key]) - const error = errorKey && this.props[errorKey] + let error = errorKey && this.props[errorKey] + if (typeof error === 'function') { + error = error(value, this.props) + } input.setCustomValidity(error) return error } diff --git a/src/Html5ValidationField.test.js b/src/Html5ValidationField.test.js index 4a0a424..7c1fcfb 100644 --- a/src/Html5ValidationField.test.js +++ b/src/Html5ValidationField.test.js @@ -537,5 +537,34 @@ describe('Html5ValidationField', () => { } ) }) + it('should support functions as default error keys', () => { + const setCustomValidity = jest.fn() + mockFindNode( + { + nodeName: 'input', + setCustomValidity, + validity: { + tooShort: true + } + }, + () => { + const spy = jest.fn(({ input }) => ) + TestUtils.renderIntoDocument( +
+ {() => + + `Value ${value} should have at least ${minLength} characters.`} + minLength={8} name="foo" render={spy} /> + } + + ) + expect(spy).toHaveBeenCalled() + expect(spy).toHaveBeenCalledTimes(2) + expect(spy.mock.calls[1][0].meta.error).toBe('Value bar should have at least 8 characters.') + } + ) + }) }) + }) diff --git a/src/types.js.flow b/src/types.js.flow index 900aeff..68912f6 100644 --- a/src/types.js.flow +++ b/src/types.js.flow @@ -1,15 +1,17 @@ // @flow import type { FieldProps } from 'react-final-form' +type MessageValue = string | ((value?: any, props: Object) => string) + type Messages = { - badInput?: string, - patternMismatch?: string, - rangeOverflow?: string, - rangeUnderflow?: string, - stepMismatch?: string, - tooLong?: string, - tooShort?: string, - typeMismatch?: string, - valueMissing?: string + badInput?: MessageValue, + patternMismatch?: MessageValue, + rangeOverflow?: MessageValue, + rangeUnderflow?: MessageValue, + stepMismatch?: MessageValue, + tooLong?: MessageValue, + tooShort?: MessageValue, + typeMismatch?: MessageValue, + valueMissing?: MessageValue } export type Html5ValidationFieldProps = FieldProps & Messages