Validate.js with React Native Form Example

form.jsx

import React, {Component} from 'react'
import {View, Button} from 'react-native'

import TextField from 'textfield'
import validation from 'validation'
import validate from 'validation_wrapper'

export default class Form extends Component {
  constructor(props) {
    super(props)

    this.state = {
      email: '',
      emailError: '',
      password: '',
      passwordError: ''
    }
  }

  register() {
    const emailError = validate('email', this.state.email)
    const passwordError = validate('password', this.state.password)

    this.setState({
      emailError: emailError,
      passwordError: passwordError
    })

    if (!emailError && !passwordError) {
      alert('Details are valid!')
    }
  }

  render() {
    return (
      <View>
        <TextField
          onChangeText={value => this.setState({email: value.trim()})}
          onBlur={() => {
            this.setState({
              emailError: validate('email', this.state.email)
            })
          }}
          error={this.state.emailError}/>

        <TextField
          onChangeText={value => this.setState({password: value.trim()})}
          onBlur={() => {
            this.setState({
              passwordError: validate('password', this.state.password)
            })
          }}
          error={this.state.passwordError}
          secureTextEntry={true}/>

        <Button
          title='Register'
          onPress={this.validateRegister}/>

      </View>
    )
  }
}

@SwapnilShoreline here is the validate_wrapper from @pavsidhu

import validation from 'validation.js';

export default function validate(fieldName, value) {
// Validate.js validates your values as an object
// e.g. var form = {email: '[email protected]'}
// Line 8-9 creates an object based on the field name and field value
var formValues = {};
formValues[fieldName] = value;

// Line 13-14 creates an temporary form with the validation fields
// e.g. var formFields = {
// email: {
// presence: {
// message: 'Email is blank'
// }
// }
var formFields = {};
formFields[fieldName] = validation[field];

// The formValues and validated against the formFields
// the variable result hold the error messages of the field
const result = validatejs(formValues, formFields);

// If there is an error message, return it!
if (result) {
// Return only the field error message if there are multiple
return result[field][0];
}

return null;
}