perscrew
Undefined is not a function (evaluating 'this.validate')
I got error in _onPressButton, it refers to : _onPressButton() { // Call ValidationComponent validate method this.validate({ userEmail: {email: true, minlength:6, required: true}, userPassword: {minlength:6, required: true} }).then(Actions.index()); }
Hi @ridhofh ! The validate methods doesn't return a promise. This is synchronous operation.
Sorry for the delay, you just have to extend ValidationComponent to your custom React Component and call : this.validate() in your click handler.
The validate methods will populate some validation informations in the root of your component.
see the documentation:
import ValidationComponent from 'react-native-form-validator';
export default class MyForm extends ValidationComponent {
...
}
getting the same error Undefined is not a function (evaluating 'this.validate')
import React, { Component } from 'react'; import { View, Text, TextInput, TouchableHighlight } from 'react-native'; import ValidationComponent from '../../validator/index';
export default class App extends ValidationComponent {
constructor(props) { super(props); // this.state = {name : "My name", email: "[email protected]", number:"56", date: "2017-03-01"}; this.state = { name: "", email: "", number: "", date: "" }; }
_onPressButton = () => { this._validateForm(); }; onChangeTextName = (text) => { this.setState({ name: text }); this.validate({ name: { minlength: 3, maxlength: 7, required: true } });
} onChangeTextEmail = (text) => { this.setState({ email: text }); this.validate({ email: { email: true } });
} onChangeTextDigit = (text) => { this.setState({ number: text }); this.validate({ number: { numbers: true } });
} onChangeTextDate = (text) => { this.setState({ date: text }); this.validate({ date: { date: 'YYYY-MM-DD' } });
}
_validateForm() { this.validate({ name: { minlength: 3, maxlength: 7, required: true }, email: { email: true }, number: { numbers: true }, date: { date: 'YYYY-MM-DD' } }); }
render() {
return (
<View style={{ paddingVertical: 30 }}>
<Text>Name</Text>
<TextInput ref="name" onChangeText={(name) => this.onChangeTextName(name)} value={this.state.name} />
<Text>{(this.isFieldInError('name') && this.getErrorsInField('name'))?this.getErrorsInField('name'):''}</Text>
<Text>Email</Text>
<TextInput ref="email" onChangeText={(email) => this.onChangeTextEmail(email)} value={this.state.email} />
<Text>{(this.isFieldInError('email') && this.getErrorsInField('email'))?this.getErrorsInField('email'):''}</Text>
<Text>Number</Text>
<TextInput ref="number" onChangeText={(number) => this.onChangeTextDigit(number)} value={this.state.number} />
<Text>{(this.isFieldInError('number') && this.getErrorsInField('number'))?this.getErrorsInField('number'):''}</Text>
<Text>DoB</Text>
<TextInput ref="date" onChangeText={(date) => this.onChangeTextDate(date)} value={this.state.date} />
<Text>{(this.isFieldInError('date') && this.getErrorsInField('date'))?this.getErrorsInField('date'):''}</Text>
<TouchableHighlight onPress={this._onPressButton}>
<Text>Submit</Text>
</TouchableHighlight>
</View>
);
}
}
Use this _onPressButton = () => { this.validate({ name: { minlength: 3, maxlength: 7, required: true }, email: { email: true }, number: { numbers: true }, date: { date: 'YYYY-MM-DD' } }); }
Instead of _onPressButton(){ this.validate({ name: { minlength: 3, maxlength: 7, required: true }, email: { email: true }, number: { numbers: true }, date: { date: 'YYYY-MM-DD' } }); }
@DheereshSinghKarki
You have to use 'bind' :
<TouchableHighlight onPress={this._onPressButton.bind(this)}> <Text>Submit</Text> </TouchableHighlight>
