Coder Social home page Coder Social logo

Comments (5)

imamsutono avatar imamsutono commented on June 30, 2024 1

try to call setState with whatever state you have, such as error state and pass with any value

from react-native-form-validator.

 avatar commented on June 30, 2024

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' }
});
}

from react-native-form-validator.

 avatar commented on June 30, 2024

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>
);

}

}

from react-native-form-validator.

team-collaboration avatar team-collaboration commented on June 30, 2024

Did anyone found a solution for this? same issue happening in my app as well.
Please share the solution.

My issue is:
when clicking on the form submit button the error is not showing right after clicking on checkbox or selection from picker the error message shows up.

from react-native-form-validator.

PauZoffoli avatar PauZoffoli commented on June 30, 2024

constructor(props) {

super(props  );

this.state = { cambio: "",name : "", email: "[email protected]", number:"56", date: "2017-03-01"};

}

_onPressButton = () => {
// Call ValidationComponent validate method
this.validate({
name: {minlength:3, maxlength:7, required: true},
email: {email: true},
number: {numbers: true},
date: {date: 'YYYY-MM-DD'}
});

this.setState({
  cambio: ''
})

}

from react-native-form-validator.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.