How to validate decimal with comma for Input onChangeText React Native?

Question

I need to validate number with two decimal in TextInput (React Native) to prevent the insertion of the second comma. Right now I can enter 123,12,23 and it breaks the app.

export default class Bottom extends Component {
  constructor(props){
    super(props)
    this.state = {
      sum:'',
    }
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(value) {
     // validation of the value
     this.setState({sum: value});
   }
 render () {
    return ( 
      <View>
       <TextInput 
        style={styles.input} 
        keyboardType ="decimal-pad"
        autoCorrect={false}
        placeholder='add'
        onChangeText={ this.handleInputChange }
        value={this.state.sum} 
       />
      </View> 
    );
  }

I tried to use indexOf but it deletes the first comma, not the second

if (value.indexOf(',') === -1) {
 this.setState({sum: value});

Any suggestions or link to right answers?

Update

I've resolved it:

handleInputChange(value) {
    let lastValid = this.state.sum;
    //var validNumber = new RegExp(/^\d*\.?\d*$/); // for dot
    var validNumber = new RegExp(/^\d*\,?\d*$/); // for comma
      if (validNumber.test(value)) {
        lastValid = value;
      } else {
        value = this.state.sum;
      }
    this.setState({ sum: lastValid });
  }

Sandbox updated as well

Sandbox:https://codesandbox.io/s/unruffled-blackwell-208p6?file=/src/App.js

k-wasilewski · Accepted Answer · 2020-07-15 12:12:01Z

1

I would do it like this: add onKeyPress={this.handleKeyPress} to your TextInput, then:


handleKeyPress(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && ((charCode < 48 || charCode > 57) || charCode != 188)) {
        return false;
    }
    if (this.value.match(/,.*,/g) return false;

    return true;
}

edited Jul 15, 2020 at 12:12

answered Jul 15, 2020 at 8:50

k-wasilewski

4,6914 gold badges18 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

k-wasilewski Over a year ago

What do you mean? Your input element is not accepting such values?

Champion Over a year ago

I added sandbox above, could you check it?

k-wasilewski Over a year ago

You have to remove the hardcoded value={this.state.sum} at <input/>, that's causing the lock

Champion Over a year ago

if I remove it how then it will validate the input? that is I entered 123,55,8899 ... I need a second comma not to be allowed to enter.

Champion Over a year ago

thanks for your efforts. I've already solved it and I've posted it in my question update. Moreover the solution is for React Native, not for PC keyboard.

|

Collectives™ on Stack Overflow

How to validate decimal with comma for Input onChangeText React Native?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related