How to do validation with React Native package tcomb-form-native

Question

While entering an email in the TextInput, it should validate and display the error message based on whether the entered email is valid or not? I'm using tcomb form validation. How to add email validation in tcomb form? Below is the code.

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  Image,
  View,
  Button,
  StyleSheet,
  TextInput,
  Linking,
  Alert,
  Navigator
} from 'react-native';
import t from 'tcomb-form-native';

const Form = t.form.Form;

// here we are: define your domain model
const LoginFields = t.struct({
  username: t.String,              // a required string
  password: t.String,   // a required string
});

const options = {
  fields: {
    password: {
      type: 'password',
      placeholder: 'Password',

    },
    username: {
      placeholder: 'e.g: abc@gmail.com',
      error: 'Insert a valid email'
    }
  }
}; // optional rendering options (see documentation)

export default class Login extends Component {
  _onSubmit() {
    // Alert.alert('Button has been pressed!');
    const value = this.refs.form.getValue();
    if (value) { // if validation fails, value will be null
      console.log(value); // value here is an instance of LoginFields
    }
    this.props.navigator.push({
      id: 'Home'
    });
  }
  render() {
    return (
      <View style={styles.containerView}>
      <Form
        ref="form"
        type={LoginFields}
        options={options}
      />
        <Text style={{color: 'blue', marginBottom: 10}}
          onPress={() => Linking.openURL('https://www.google.co.in')}>
          Forgot Password?
        </Text>
        <Button
            onPress={this._onSubmit.bind(this)}
            title="Login"
            style={styles.loginButton}
            accessibilityLabel="Ok, Great!"
          />
      </View>
    );
  }
};

const styles= StyleSheet.create({
  containerView: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ffebcd',
    borderStyle: 'solid',
    borderColor: '#000000'
  },
  loginText: {
    fontSize: 20,
    marginBottom: 10
  },
  inputFields: {
    fontSize: 20,
    borderStyle: 'solid',
    borderColor: '#000000',
    borderRadius: 30,
    marginBottom: 10
  },
  loginButton: {
    backgroundColor: '#34A853'
  }
});

You at least have to try, this is not a code writing service - have a go, if you have issues, there's lots of people willing to help — StudioTime, Mar 27 '17 at 06:36
@DarrenSweeney I forgot to add my code. Please check above code which i tried. — Kirti, Mar 27 '17 at 06:46

score 8 · Accepted Answer · edited May 23 '17 at 11:46

You can use Regular Expressions for validations. You can find a lot of RegEx's for common use cases online or you can make your own. For email validation with tcomb try this

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  Image,
  View,
  Button,
  StyleSheet,
  TextInput,
  Linking,
  Alert,
  Navigator
} from 'react-native';
import t from 'tcomb-form-native';

const Form = t.form.Form;

// here we are: define your domain model
const Email = t.subtype(t.Str, (email) => {
  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return reg.test(email);
});

const LoginFields = t.struct({
  username: Email,  // a required string
  password: t.String, // a required string
});

const options = {
  fields: {
    password: {
      type: 'password',
      placeholder: 'Password',

    },
    username: {
      placeholder: 'e.g: abc@gmail.com',
      error: 'Insert a valid email'
    }
  }
}; // optional rendering options (see documentation)

export default class Login extends Component {
  _onSubmit() {
    const value = this.refs.form.getValue();
      console.log(value); // value here is an instance of LoginFields
     if (value) { // if validation fails, value will be null
       console.log(value); // value here is an instance of LoginFields
     }
     this.props.navigator.push({
       id: 'Home'
     });
  }
  render() {
    return (
      <View style={styles.containerView}>
      <Form
        ref="form"
        type={LoginFields}
        options={options}
      />
        <Text style={{color: 'blue', marginBottom: 10}}
          onPress={() => Linking.openURL('https://www.google.co.in')}>
          Forgot Password?
        </Text>
        <Button
            onPress={this._onSubmit.bind(this)}
            title="Login"
            style={styles.loginButton}
            accessibilityLabel="Ok, Great!"
          />
      </View>
    );
  }
};

const styles= StyleSheet.create({
  containerView: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ffebcd',
    borderStyle: 'solid',
    borderColor: '#000000'
  },
  loginText: {
    fontSize: 20,
    marginBottom: 10
  },
  inputFields: {
    fontSize: 20,
    borderStyle: 'solid',
    borderColor: '#000000',
    borderRadius: 30,
    marginBottom: 10
  },
  loginButton: {
    backgroundColor: '#34A853'
  }
});

It actually working, please edit your question with your latest code. Let me check — Hariks, Mar 27 '17 at 09:25
Thank you.. It's showing error on click of submit rather while typing. I was looking for displaying errors while typing. :) — Kirti, Mar 27 '17 at 10:15
You can use onChange of Form for that `
{ this.refs.form.getValue() }} options={options} />` — Hariks, Mar 27 '17 at 10:27
Can you please guide me how to apply icons in tcomb forms textInput? — Kirti, Mar 28 '17 at 04:19
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/139221/discussion-between-hariks-and-kirti). — Hariks, Mar 28 '17 at 07:59

How to do validation with React Native package tcomb-form-native

1 Answers1