How to Validate All Input On Single Submit Click In React Native

问题

I am New to react native. I want to Validate multiple InputText on Single Submit click.

for example : Mobile Number = must 10 digit should Not start with 0, and Must start With 98 IFSC Code = First Four character must be Alphabet 5th character must be 0, Email Id validation. Please If Possible Modify My code Please Help Me. Thanks !

here is my code

import React, {useState, Component} from 'react';
import {Picker, Text, StyleSheet, View, TextInput, Button, KeyboardAvoidingView, ScrollView, alert, Alert, TouchableHighlight} from 'react-native';
import { StackNavigator, navigation} from "react-navigation";
import ValidationComponent from 'react-native-form-validator';

// const PickerDemo = (navigation) => {
  class PickerDemo extends  ValidationComponent{

    constructor(props) {
      super(props);
    }
  render(){
    const offset = (Platform.OS === 'android') ? -200 : 0;

  return (
    
    <KeyboardAvoidingView keyboardVerticalOffset={offset} style={styles.form} behavior='padding'>
      <Text style={styles.formLabel}> BANK INFORMATION Form </Text>
      <ScrollView style={{flex: 1,}} showsVerticalScrollIndicator={false}>        
      <TextInput maxLength={20} placeholder="Name" style={styles.inputStyle}/>
        <TextInput maxLength={16} placeholder="ACCOUNT NUMBER*" style={styles.inputStyle} />
        <TextInput maxLength={20} placeholder="IFSC Code*" style={styles.inputStyle} />
        <TextInput maxLength={20} placeholder="Name of Bank*" style={styles.inputStyle} />
        <TextInput maxLength={10} keyboardType = 'numeric' placeholder="Mobile Number *" style={styles.inputStyle} />
        <TextInput maxLength={6} placeholder="Email ID*" style={styles.inputStyle} />
      </ScrollView>
      <View style={{ height: 30 }} />
      <Button style={styles.inputStyleB}
          title="Submit"
          color="#808080"
          onPress={() => Alert.alert('Submit Button pressed')}
        />
        </KeyboardAvoidingView>
        );
      };
    }

const styles = StyleSheet.create({
    form: {
        flex: 1,
        justifyContent: "center",
        flex: 1,
        backgroundColor: "rgb(247, 146, 57)",
        alignItems: 'center',
        paddingTop: 50,
      },
  container: {
    flex: 1,
    backgroundColor: "rgb(247, 146, 57)",
    alignItems: 'center',
    //justifyContent: 'center',
    paddingTop: 15
  },

  formLabel: {
    fontSize: 20,
    color: 'rgb(10, 10, 10)',
  },
  inputStyle: {
    marginTop: 20,
    width: 300,
    height: 40,
    paddingHorizontal: 10,
    borderRadius: 50,
    backgroundColor: 'rgb(255, 252, 252)',
  },
  formText: {
    alignItems: 'center',
    justifyContent: 'center',
    color: '#fff',
    fontSize: 20,
  },
  text: {
    color: '#fff',
    fontSize: 20,
  },
});

export default PickerDemo;

please Ignore This = I am New to react native. I want to Validate multiple InputText on Single Submit click. I am New to react native. I want to Validate multiple InputText on Single Submit click. I am New to react native. I want to Validate multiple InputText on Single Submit click. I am New to react native. I want to Validate multiple InputText on Single Submit click. I am New to react native. I want to Validate multiple InputText on Single Submit click. I am New to react native. I want to Validate multiple InputText on Single Submit click.

回答1:

You can implement as follows

Show TextInput and Error,

<TextInput 
  maxLength={16} 
  placeholder="ACCOUNT NUMBER*" 
  style={styles.inputStyle}
  onChangeText={this.handleAccountNo} 
/>
<Text>{this.state.accountError}</Text>
<Button style={styles.inputStyleB}
   title="Submit"
   color="#808080"
   onPress={() => this.validateInputs()}
/>

function for handleAccountNo

handleAccountNo = (text) => {
  this.setState({ accountError: '' })
  this.setState({ accountNo: text })
}

function for validateInputs,

validateInputs = () => {
   if (!this.state.accountNo.trim()) {
     this.setState({ accountError: 'Please enter account no' })
     return;
   }
   else {
     alert("All fields validated")
     return;
   }
 }

来源：https://stackoverflow.com/questions/65845421/how-to-validate-all-input-on-single-submit-click-in-react-native

标签

react-native

validation