react native validation how can get value check how to pass value and set in Toast Android, how to used toast
Tutorial 0 Commentsreact native validation how can get value check, how to pass value and set in Toast Android, how to used toast
validation registration in react native on submit input box empty form connect with php mysql code, how to used exit
this.setState() = used to input write that used update
this.state.emailError = used to display time that used get value
get value
const n1=this.state.userName;
console.log(n1);
how to used exit mean that code not run next used return;
console.log(n1);
// return; // used to exit not run code next
————————–
<TextInput placeholder=”Enter Phone” keyboardType={‘numeric’} style={{width:200,borderWidth:1,margin:10}} maxLength={12} onChangeText={userName=>this.setState({userName})} />
PHP mysql jason file download check
jassion file download on click
jason file in php
click and download validation with mysql php file download using nexted if else
zip file download validation onsubmit empty php mysql
click and download validation on blure on submit connect with php mysql
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import * as React from 'react';
import{
View,
TextInput,ToastAndroid,
SafeAreaView,
StyleSheet,
Text,
Button
} from 'react-native';
interface State{
userName: string;
userEmail: string;
userPassword: string;
}
interface Props{
}
export class App extends React.Component<Props, State>{
constructor(props) {
super(props);
this.state ={
userName:'',
userEmail:'',
userPassword:'',
};
}
userRegister = () =>{
// console.log('Login');
const {userName}=this.state;
const {userEmail}=this.state;
const {userPassword}=this.state;
//console.log(userName);
const n1=this.state.userName;
console.log(n1);
if (n1.length) {
//your code here
fetch('https://www.howcanfind.com/mobileapp/reg.php',{
method:'post',
headers:{
'Accept':'application/json',
'Content-type':'application/json'
},
body:JSON.stringify({
name:userName,
email:userEmail,
password:userPassword,
})
})
.then((response) => response.json())
.then((responseJson)=>{
ToastAndroid.show(responseJson,ToastAndroid.CENTER);
this.setState({userName : ''})
})
.catch((error)=>{
console.error(error);
});
}// if
else {
console.log('enter number');
} // if
this.setState({userName : ''})
}// func
render(){
return(
<SafeAreaView
style={styles.container}>
<Text>Sign-up {this.state.userName} </Text>
<TextInput
placeholder="Enter Phone"
keyboardType={'numeric'}
style={{width:200,borderWidth:1,margin:10}}
maxLength={12} value={this.state.userName}
onChangeText={userName=>this.setState({userName})}
/>
<TextInput
placeholder="Enter Email"
style={{width:200,borderWidth:1,margin:10}}
onChangeText={userEmail=>this.setState({userEmail})}
/>
<TextInput
placeholder="Enter Password"
style={{width:200,borderWidth:1,margin:10}}
onChangeText={userPassword=>this.setState({userPassword})}
/>
<Button title="Signup" onPress={this.userRegister} />
</SafeAreaView>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,justifyContent:'center',alignItems:'center'
},
});
how to pass value and set in Toast Android, how to used toast
//console.log(‘enter number’); // show message in editor terminal
//console.error(‘enter number’); // show message on mobile screen
// console.warn(‘enter number’); // show message on mobile screen
//ToastAndroid.show(“enter number”,ToastAndroid.CENTER); // show message on mobile screen and best used
const n1=’enter no’; // how to variable pass in toast
ToastAndroid.show(n1,ToastAndroid.CENTER);
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import * as React from 'react';
import{
View,
TextInput,ToastAndroid,
SafeAreaView,
StyleSheet,
Text,
Button
} from 'react-native';
interface State{
userName: string;
userEmail: string;
userPassword: string;
}
interface Props{
}
export class App extends React.Component<Props, State>{
constructor(props) {
super(props);
this.state ={
userName:'',
userEmail:'',
userPassword:'',
};
}
userRegister = () =>{
// console.log('Login');
const {userName}=this.state;
const {userEmail}=this.state;
const {userPassword}=this.state;
//console.log(userName);
const n1=this.state.userName;
console.log(n1);
if (n1.length) {
//your code here
fetch('https://www.howcanfind.com/mobileapp/reg.php',{
method:'post',
headers:{
'Accept':'application/json',
'Content-type':'application/json'
},
body:JSON.stringify({
name:userName,
email:userEmail,
password:userPassword,
})
})
.then((response) => response.json())
.then((responseJson)=>{
ToastAndroid.show(responseJson,ToastAndroid.CENTER);
//this.response = responseJson;
})
.catch((error)=>{
console.error(error);
});
}// if
else {
//console.log('enter number');
//console.error('enter number');
//ToastAndroid.show("enter number",ToastAndroid.CENTER);
const n1='enter no';
ToastAndroid.show(n1,ToastAndroid.CENTER);
} // if
//this.setState({userName : ''})
}// func
render(){
return(
<SafeAreaView
style={styles.container}>
<Text>Sign-up {this.state.userName} </Text>
<TextInput
placeholder="Enter Phone"
keyboardType={'numeric'}
style={{width:200,borderWidth:1,margin:10}}
maxLength={12}
onChangeText={userName=>this.setState({userName})}
/>
<TextInput
placeholder="Enter Email"
style={{width:200,borderWidth:1,margin:10}}
onChangeText={userEmail=>this.setState({userEmail})}
/>
<TextInput
placeholder="Enter Password"
style={{width:200,borderWidth:1,margin:10}}
onChangeText={userPassword=>this.setState({userPassword})}
/>
<Button title="Signup" onPress={this.userRegister} />
</SafeAreaView>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,justifyContent:'center',alignItems:'center'
},
});
this is correct validation on blur and on submit
on blur = just check condition when click and go to next inputbox
on submit = on submit is proper validation check if else nexted if else so last if is correct
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import * as React from 'react';
import{
View,
TextInput,ToastAndroid,
SafeAreaView,
StyleSheet,
Text,
Button
} from 'react-native';
interface State{
userName: string;
nameError: string; // this is used to on blur only
userEmail: string; // this is used to on blur only
emailError: string;
userPassword: string;
}
interface Props{
}
export class App extends React.Component<Props, State>{
constructor(props) {
super(props);
this.state ={
userName:'',
nameError: '', // this is used to on blur only
emailError:'', // this is used to on blur only
userEmail:'',
userPassword:'',
};
}
userRegister = () =>{
// console.log('Login');
const {userName}=this.state;
const {userEmail}=this.state;
const {userPassword}=this.state;
//console.log(userName);
const n1=this.state.userName;
const e1=this.state.userEmail;
const p1=this.state.userPassword;
const num = /^[0-9]+$/; // just insilize used enter number only
const reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; // email check
if( n1=="")
{
//console.log(n1);
console.log("enter phone");
}
else if( num.test(n1) === false) // phone check top insilize
{
console.log("enter correct phone no");
}
else if( e1=="" )
{
console.log("enter email");
}
else if( reg.test(e1) === false) // email check top insilize
{
console.log("enter correct email");
}
else if( p1=="" )
{
console.log("enter password");
}
else
{
console.log(n1);
}
//this.setState({userName : ''})
}// func
// start on blur validation used only phone
phonevalid()
{
const namepho=this.state.userName;
if(namepho=="")
{
//console.warn('enter email');
this.setState({nameError:"Enter phone no"})
}
else {
//let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
const num = /^[0-9]+$/;
if (num.test(namepho) === false) {
// console.warn("phone is Not Correct");
this.setState({nameError:"phone is not correct"})
} else {
//console.log("phone is Correct");
this.setState({nameError:""})
}
}
}
// start on blur validation used
// start on blur validation used only email
emailvalid()
{
const eml=this.state.userEmail;
if(eml=="")
{
//console.warn('enter email');
this.setState({emailError:"Enter email"})
}
else {
let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (reg.test(eml) === false) {
// console.warn("Email is Not Correct");
this.setState({emailError:"email is not correct"})
} else {
//console.log("Email is Correct");
this.setState({emailError:""})
}
}
}
// start on blur validation used only email
render(){
return(
<SafeAreaView
style={styles.container}>
<Text>Sign-up {this.state.userName} </Text>
<TextInput
placeholder="Enter Phone"
keyboardType={'numeric'}
onBlur={()=>this.phonevalid()}
style={{width:200,borderWidth:1,margin:10}}
maxLength={12}
onChangeText={userName=>this.setState({userName})}
/>
<Text style={{color:'red'}}>{this.state.nameError}</Text>
<TextInput
placeholder="Enter Email"
onBlur={()=>this.emailvalid()}
style={{width:200,borderWidth:1,margin:10}}
onChangeText={userEmail=>this.setState({userEmail})}
/>
<Text style={{color:'red'}}>{this.state.emailError}</Text>
<TextInput
placeholder="Enter Password"
style={{width:200,borderWidth:1,margin:10}}
onChangeText={userPassword=>this.setState({userPassword})}
/>
<Button title="Signup" onPress={this.userRegister} />
</SafeAreaView>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,justifyContent:'center',alignItems:'center'
},
});