TextInput validation while typing

Question

I have a TextInput for a specific format of e-mail address, and have a regex to validate it. I would like to validate it while the user types, with the exact value on the TextInput box, but I'm not getting that.

What I have done is actually add that validation to the OnChangeText method of the TextInput object. The mechanics seems to work, but it is validating against the content 1 letter behind the current content.

Ex.: If I have typed "June" it will validate "Jun" only. If I delete the "e", then it will get "June" and subsequently.

Is that correct, or is there somewhere else I can call my validation to have the expected effects?

<TextInput
    placeholder='Type in your email'
    style={Styles.Input}
    onChangeText={(text) => {this.setLogin(text)}}
    value={ this.state.login }
    autoCompleteType={"email"}
    autoFocus={true}
/>
...
...
...
setLogin = (input) => {
    this.setState({login: input});
    console.log(this.state.login_regex.test(this.state.login));
    if (!this.state.login_regex.test(this.state.login)) {
        this.setState({login_msg: "Use an internal mail address"});
    } else {
        this.setState({login_msg: ""});
    };
};

What's output of console.log(this.state.login_regex.test(this.state.login))? And can you share login_regex state? — DevAS
– DevAS, Commented Nov 17, 2019 at 23:25

Juviro · Accepted Answer · 2019-11-17 23:04:03Z

1

setState is an asynchronous function, that‘s why this.state.login might still hold the old value when testing.

You can either use the input instead of the value of the state, like this

if (!this.state.login_regex.test(input)) {
  ...
}

or you can pass a callback function as the second parameter to this.setState like this

this.setState({login: input}, () => {
  if (!this.state.login_regex.test(this.state.login)) {
    ...
  }
});

but I‘d usually recommend the first approach.

answered Nov 17, 2019 at 23:04

Juviro

1901 silver badge7 bronze badges

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

Comments

Minh Dao · Accepted Answer · 2019-11-18 02:44:13Z

Well, it's actually in your setLogin function.

setLogin = (input)=>{
    this.setState({login: input}); // <= this is the problem
    console.log(this.state.login_regex.test(this.state.login));
    if (!this.state.login_regex.test(this.state.login)) {
        this.setState({login_msg: "Use an internal mail address"});
    } else {
        this.setState({login_msg: ""});
    };
};

In your code, you have called setState() right before your validation, which means you save your input before you check it. To resolve this, just remove the this.setState({login: input}); and your code will work properly.

P/s: Since React Native has to tranfer your datas and commands between JS side and native side, there might be some unexpected visual performances, e.g: your last input character will appear for a very short moment before disappearing.

Collectives™ on Stack Overflow

TextInput validation while typing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related