CODEWITHSUNDEEP
react-native
Atanu Samanta
Atanu Samanta

Reputation: 175

Disable submit button from submit in react native

I have just created a login form and doing validation on it, but not found how to disable submit button from submit in react native if validation fails. I am not using any type of library here, just try to prevent button from submit in react native and if there is any valuable link for form handling in react native.

Any help with this would be appreciated.

Upvotes: 0

Views: 635

Answers (2)

Hazim Ali
Hazim Ali

Reputation: 1095

once submit, you can check if your validation is success or no and if not, just ignore or pop an alert to tell the user the error..

onSubmit = () => {
  if(validationSuccess) {
    //navigate to next screen component
  } else {
    //Alert to user
  }
}

or if you do the validation onChange inside your render you still can do if else condition to make your submit button into grey and not clickable

render() {
  return (
   ....

   {this.state.validationSuccess ? (
      <TouchableHighlight onPress={() => this.onSubmit()}>
        <Text>LOGIN</Text>
      </TouchableHighlight>
   ) : (
      <View style={{ backgroundColor: 'grey'}}>
        <Text>LOGIN</Text>
      </View>
   )}      

   ....
  )
}

after all, there is still other way to do this here but this is some example.. hope that helps you to start.. happy exploring!

Upvotes: 1

Ali SabziNezhad
Ali SabziNezhad

Reputation: 3118

You can do it in submit button's onPress function like this:

if (validation is successful)
    submit
else
    Do nothing

its a very simple way and other people may have different answers.

Upvotes: 1

Related Questions