React-number-format: How to validate the length of character in the text field?

[maitedev]

Hi, I'm trying to validate the character length in the text field.
I want to visually show the user when the character is with the correct length, for that I am using the "error" and "helperText" property. I was reading and they recommend using the "isAllowed" property. I have tried several ways to integrate it with the onValueChange and with my error properties, but without results. Thanks in advance!!!

class SocialSecurityTextField extends Component {
state = {
error: false
};
handleChange = event => {
const targetField = event.target.name;
const targetValue = event.target.value;
if (targetValue.length < 9) {
this.setState({
...this.state,
error: true
});
} else {
this.setState({
...this.state,
error: false,
});
}
this.props.updateCurrentObjectFieldsOnChange(targetField, targetValue);
};
render() {
const { fullWidth, readOnly, name, value } = this.props;
const { error } = this.state;
return (

format="###-##-####"
mask="_"
customInput={TextField}
isNumericString
name={name}
value={value}
onValueChange={values =>
this.handleChange({ target: { name, value: values.value } })
}
// isAllowed={values => {return values.value.length < 9}}
error={error}
helperText={error ? "Invalid Social Security Format" : ""}
autoFocus={true}
/>

[ahmad-reza619]

i have created the codesandbox here

i do think this is because of format props that it doesn't accept anymore values after 9 characters. i do think displaying an error message is unnecessary here. @s-yadav what do you think?

[maitedev]

thanks ahmad-pray619 for taking some time and responding.
It may not be necessary to show an error message, but I consider that all visual help we give to the user, to ensure that the data we send to the server is correct, is welcome.
let's forget the error message (which I consider very useful)
How would you guarantee, in this case, to do the updateCurrentObjectFieldsOnChange method dispatch, only after 9 characters?

[ahmad-reza619]

this is the cause of issue. i believe this is intentional by the author. So you can try and patch this if you wanted to go fast by getting rid of it.

but in your use case, i think with these, you benefit from not having to worry the user might smash many characters as they are already prevented by the library 😃 . unfortunately i can't find the workaround for this issue now. this needs clarification by @s-yadav as the author

[ahmad-reza619]

@maitedev i will try to inform you as soon as i get a workaround for this. 😄

[maitedev]

THANKS!!

[truqa001]

There is one solution, which might work in your case: you can pass a function to isAllow to check the value. If this.state.value is equal to the value, which means it has exceed the limitation of 9 digits, then you can show up the error message. (This solution not works for me as i'm using decimal number, which have the case when user press .. But in your case, i'm pretty sure it will work :) )

[maitedev]

Hi Anthony, thank you very much for taking the time and answering. Implement your suggestion and I'm already showing the error message, but I can't integrate with the onChange event.
I'm supposedly deleting a character, so it fires the isAllowed event and displays the error message, but the onValueChange event is not firing.
Here I show you my solution, maybe something is missing. Thanks again for your time.

class SocialSecurityTextField extends Component {
  state = {
    error: false
  };

  handleChange = event => {
    const targetField = event.target.name;
    const targetValue = event.target.value;
    this.props.updateCurrentObjectFieldsOnChange(targetField, targetValue);
  };

  handleLengthValidation = value => {
    if (value.length < 9) {
      this.setState({
        ...this.state,
        error: true
      });
    } else {
      this.setState({
        ...this.state,
        error: false
      });
    }
  };

  render() {
    const { fullWidth, readOnly, name, value } = this.props;
    const { error } = this.state;
    return (
      <Fragment>
        <NumberFormat
          autoFocus={true}
          format="### - ## - ####"
          mask="_"
          customInput={TextField}
          isNumericString
          fullWidth={fullWidth ? fullWidth : true}
          name={name}
          value={value}
          onValueChange={values =>
            this.handleChange({ target: { name, value: values.value } })
          }
         inputProps={{
            readOnly: Boolean(readOnly),
            disabled: Boolean(readOnly)
          }}
         error={error}
         helperText={error ? "Invalid Social Security Format" : ""}
         isAllowed={values => this.handleLengthValidation(values.value)}
        />
      </Fragment>