Closed nlatifahulfah closed 2 years ago
@nlatifahulfah hi
minNumber
validation rule already exists in react-form-validator-core
@NewOldMax It is. But it will validate the formatted value (string), eg. "Rp. 123". In my case, the field value is formatted using react-number-format, and I want to validate the unformatted value using controlled component. I can't use the minNumber validation rule.
you can use custom validation component with error message only to validate correct numeric value
import React from 'react';
import { ValidatorComponent } from 'react-form-validator-core';
class ValidationArea extends ValidatorComponent {
render() {
return (
<div>
{this.errorText()}
</div>
);
}
errorText() {
const { isValid } = this.state;
if (isValid) {
return null;
}
return (
<div style={{ color: 'red' }}>
{this.getErrorMessage()}
</div>
);
}
}
export default ValidationArea;
<TextInput value={fancyTextValue} />
<ValidationArea value={numericValue} />
Thank you for your suggestion. It will work too. But I prefer to extract the logic from the ui component.
@nlatifahulfah I still cannot see real issue. Why your solution so complex? Why you just can't do something like this?
const [min, setMin] = useState(10);
// validation rule will receive input value
ValidatorForm.addValidationRule('customMinNumber', (inputValue) => {
// use any suitable parse logic to get unformatted value
const realValue = Number(inputValue);
// min variable already available because of Closure
if (realValue < min) {
return false;
}
return true;
});
I don't know why I can't think something like that before 😅 Thank you so much .
I found a case when I can't use the input value to validate form field, because it is formatted. I want to validate the unformatted value of formated number field (react-number-format) by a dynamic minimum value. So I try to make custom validation below.
But I got an error:
I try to figure out by re-reading the documentation of this and the other library and experimenting, but I can't find any solution.
After some time, I found that I cannot use colon ':' as validation name.
Please add this rule to the documentation react-form-validator-core and react-material-ui-form-validator
Thank you ✨. !