Skip to content

Instantly share code, notes, and snippets.

@pavsidhu
Last active March 22, 2020 14:27
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pavsidhu/d4290058c5584b6ee593090e2871e844 to your computer and use it in GitHub Desktop.
Save pavsidhu/d4290058c5584b6ee593090e2871e844 to your computer and use it in GitHub Desktop.
Validate.js with React Native Form Example
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>
)
}
}
@benbieler
Copy link

benbieler commented Sep 7, 2018

          onPress={this.validateRegister}/>

should simply be this.register?

@SwapnilShoreline
Copy link

can not found validation_wrapper?

@rajatgyl
Copy link

@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@example.com'}
// 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;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment