Custom validation name should not contain colon ':'

[nlatifahulfah]

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.

const minNumber = (min) => `minimum:${min}`;

// --- 
const [value, setValue] = useState('');
const [min, setMin] = useState(10);

useEffect(() => {
    ValidatorForm.addValidationRule(minNumber(min), () => {
      if (value < min) {
        return false;
      }
      return true;
    });

    return () => {
      ValidatorForm.removeValidationRule(minNumber(min));
    };
  }, [min, value]);

// --- 

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.

const minNumber = (min) => `minimum${min}`; // <---- so I changed it so that it only uses alphabet and numbers 

Please add this rule to the documentation react-form-validator-core and react-material-ui-form-validator

Thank you ✨. !

[NewOldMax]

@nlatifahulfah hi
minNumber validation rule already exists in react-form-validator-core

[nlatifahulfah]

@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.

[NewOldMax]

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} />

[nlatifahulfah]

Thank you for your suggestion. It will work too. But I prefer to extract the logic from the ui component.

[NewOldMax]

@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;
});

[nlatifahulfah]

I don't know why I can't think something like that before 😅 Thank you so much .