Custom error message

[hungdev]

Hi, i love this lib. But i cannot custom error message. My input is number, and errorMessage="Invalid name", but when i type - , input always shows default message: This field is invalid So Could you tell me how do i custom that message. Thank you. Here is my code https://codesandbox.io/s/damp-snow-w9dxu?file=/src/App.js

[chrishavekost]

Hi there! The reason you're seeing This field is invalid instead of your custom error message has to do with line 15 where you have type="number". The HTML Number type has some built in validation that won't allow normal characters to be typed, so in your screenshot the value of the component is "".

Changing line 15 to be type="text" will allow these values and your custom error message will show up based on based on your pattern, minLength, and maxLength validation.

[hungdev]

@chrishavekost but i just want to allow input number

[TheSharpieOne]

Part of this is because of how the browser handles type="number" inputs which are invalid. The browser's validation is actually what is running in this case, not this library's validation. The browser never gives value to the library (at least in chrome), even when trying to get the input's value directly, it's an empty string (so we cannot run our own validation). In these cases we have to depend on target.validity.badInput to determine if the input is invalid. When that is invalid we don't know which one of our validations would correlate and cannot show specific error messages.

https://github.com/Availity/availity-reactstrap-validation/blob/3d44e388208438134879a30d414fff835a0f4c71/src/AvBaseInput.js#L126