Soy nuevo en reaccionar nativo. Quiero validar múltiples InputText en un solo clic de envío.

Por ejemplo: Número de móvil = debe tener 10 dígitos No debe comenzar con 0, y debe comenzar con 98 Código IFSC = Los primeros cuatro caracteres deben ser del alfabeto El quinto carácter debe ser 0, validación de identificación de correo electrónico. Por favor, si es posible, modifique mi código, por favor ayúdeme. Gracias !

Aquí está mi código

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;

Ignore esto = Soy nuevo en reaccionar nativo. Quiero validar múltiples InputText en un solo clic de envío. Soy nuevo en reaccionar nativo. Quiero validar múltiples InputText en un solo clic de envío. Soy nuevo en reaccionar nativo. Quiero validar múltiples InputText en un solo clic de envío. Soy nuevo en reaccionar nativo. Quiero validar múltiples InputText en un solo clic de envío. Soy nuevo en reaccionar nativo. Quiero validar múltiples InputText en un solo clic de envío. Soy nuevo en reaccionar nativo. Quiero validar múltiples InputText en un solo clic de envío.

0
Sohil Shaikh 22 ene. 2021 a las 15:42

1 respuesta

La mejor respuesta

Puede implementar de la siguiente manera

Mostrar entrada de texto y 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()}
/>

Función para handleAccountNo

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

Función para validateInputs,

validateInputs = () => {
   if (!this.state.accountNo.trim()) {
     this.setState({ accountError: 'Please enter account no' })
     return;
   }
   else {
     alert("All fields validated")
     return;
   }
 }
1
Ruchira Swarnapriya 22 ene. 2021 a las 13:06