Validate multiple fields from frontend using react native

Question

How to validate all the fields from the front end I have 4 fields here i have written a function on blur how can i proceed to this

import React, { Component } from 'react'

class Signup extends Component {

constructor(props) {
    super(props);
    this.state = {
        mobileno: '',
        email: '',
        password: '',
    }
}

hanldeValidation(text, type) {
    var mobilregex = /^[0-9]/;


    if (this.state.mobileno == '' && mobilregex.test(text) == false) {
        this.setState({
            errormobile: true
        })
    }

    else if (this.state.email == '' && emailregex.test(text) == false) {
        this.setState({
            erroremail: true
        })
    }
}






render() {

    return (
        <View>

            <Content style={{
                paddingLeft: 10,
                paddingRight: 10,
                backgroundColor: 'white'
            }}>

                <View style={{ paddingTop: 35, backgroundColor: '#ffffff', width: '100%', alignItems: 'center' }}>



                    {/*  Input Fields */}

                    <Item  >
                        <Input ref="mobileno" placeholder={strings('EnterMobileno')}
                            value={this.state.mobileno}
                            onChangeText={(mobileno) => this.setState({ mobileno: mobileno })}
                            onBlur={(mobileno) => this.hanldeValidation(mobileno, 'mobileno')}
                        />
                    </Item>
                    {
                        this.state.errormobile ?
                            <Text style={{ textAlign: 'center', color: 'red' }}>
                                {'Enter a valid number'}
                            </Text>
                            :
                            null
                    }



                    <Item >
                        <Input ref="email" placeholder={'Enter Email ( optional )'}
                            value={this.state.email}
                            onChangeText={(email) => this.setState({ email: email })}
                        />
                    </Item>

                    <Item >
                        <Input ref="password" placeholder={'Enter password'}
                            value={this.state.password}
                            onChangeText={(password) => this.setState({ password: password })}
                        />
                    </Item>



                    {/* Signup Button */}
                    <Button block rounded
                        style={styles.loginButtonStyle}
                        onPress={() => this.props.createUser(this.state)}
                    >
                        Signup
      </Button>

                </View>

            </Content>

        </View >
    )
}

}

const mapStateToProps = (state) => {

}

const mapDispatchToProps = (dispatch) => {

}

export default (SignupScreen)

Orgil Orgil · Accepted Answer · 2018-12-07T15:38:04

You could use following code to your form field check pattern and validation it also creates fields dynamically.

import React from 'react';
import { TouchableOpacity, View } from 'react-native';

const VALIDATE_USERFORM = {
  mobileNumber: {
    message: 'Enter your phone number',
    pattern: /^.{8}$/,
    error: "Wrong mobile number format",
  },
  // Other fields pattern and error message ...
}

class UserForm extends React.Component {
  constructor(props) {
    super(props);

    this.inputs = {};

    this.state = { ...this.generateDoc() };

    this.onSubmit = this.onSubmit.bind(this);
    this.onInputChange = this.onInputChange.bind(this);
  }

  onSubmit() {
    const doc = this.state;

    this.validateFields();

    this.props.save(doc, () => {
      console.lo('Successfully saved');
    });
  }

  focusField = name => {
    this.inputs[name].focus();
  };

  validateFields() {
    const fields = this.state;

    const names = Object.keys(fields);

    for (const name of names) {
      const validate = VALIDATE_USERFORM[name] || {};

      if (fields[name].length === 0) {
        // Empty
        return console.log(validate.message);
      }

      if (!fields[name].match(validate.pattern)) {
        // Pattern does not match
        return console.log(validate.error);
      }
    }
  }

  generateDoc() {
    const data = this.props.data || {};

    return {
      mobileNumber: data.mobileNumber || '',
      username: data.username || '',
      password: '',
    };
  }

  onInputChange(name, value) {
    this.setState({ [name]: value });
  }

  renderControl(args) {
    const {
      minLength,
      keyboardType,
      secureTextEntry,
      maxLength,
      onSubmitEditing,
      autoFocus,
      name,
      label,
      type,
    } = args;

    let control;

    const props = {
      autoFocus,
      secureTextEntry,
      onSubmitEditing,
      maxLength,
      minLength,
      keyboardType,
    };

    control = (
      <TextInput
        ref={e => (this.inputs[name] = e)}
        value={this.state[name]}
        onChangeText={e => this.onInputChange(name, e)}
        secureTextEntry={secureTextEntry}
        style={styles.input}
        returnKeyType="next"
        {...props}
      />
    );

    return this.renderField(label, control);
  }

  renderField(label, control) {
    return (
      <View style={styles.field}>
        <Text style={styles.label}>{label}*</Text>
        {control}
      </View>
    );
  }

  renderForm() {
    return (
      <View style={styles.wrapper}>
        <KeyboardAwareScrollView>
          {this.renderControl({
            name: 'mobileNumber',
            label: 'Mobile number',
            maxLength: 10,
            onSubmitEditing: () => this.focusField('username),
          })}
          {this.renderControl({
            name: 'username',
            label: 'Username',
            maxLength: 16,
            minLength: 6,
            onSubmitEditing: () => this.focusField('Password'),
          })}
          {this.renderControl({
            name: 'password',
            label: 'Password',
            maxLength: 16,
            minLength: 6,
            secureTextyEntry: true
          })}
        </KeyboardAwareScrollView>
      </View>
    );
  }

  renderButton(label, onPress) {
    return (
      <TouchableOpacity style={styles.button}} onPress={onPress}>
        <Text style={styles.buttonText}>{label.toUpperCase()}</Text>
      </TouchableOpacity>
    );
  }

  renderFooter() {
    return (
      <View style={styles.footer}>
        {this.renderButton('Save', this.onSubmit)}
      </View>
    );
  }

  render() {
    return (
      <View>
        {this.renderForm()}
        {this.renderFooter()}
      </View>
    );
  }
}

export default UserForm;

Validate multiple fields from frontend using react native

1 Answers