Error: There is an error while having a validation on the email field that works fine for the first time but it shows nothing the second time in the error fields.
I created a login form using react-native and I want to validate every field but I don't know how to do it. I'm quite new to react-native so I want to ask anyone for help. Form validation should show an error under the following conditions:
- Input form is empty
- Email text isn't email form.
- Password text does not satisfy the conditions above.
- If the Input form has errors the login button should be disabled.
- If the Input form doesn't have any errors, show an alert to inform login success
import React, { useState } from "react";
import {
Avatar,
Center,
Image,
Text,
Input,
Icon,
Button,
Stack,
Checkbox,
Divider,
Flex,
} from "native-base";
import { LinearGradient } from "expo-linear-gradient";
import { AntDesign } from "@expo/vector-icons";
import { Entypo } from "@expo/vector-icons";
import { Feather } from "@expo/vector-icons";
const Main = () => {
const [state, setState] = useState({
email: "",
emailError: "",
password: "",
});
const emailValidator = () => {
if (state.email == "") {
setState({ emailError: "Email Field canot be empty" });
} else {
setState({ emailError: "" });
}
};
return (
<LinearGradient height="100%" colors={["#4c669f", "#3b5998", "#192f6a"]}>
<View>
<Center>
<Image
source={require("../../assets/man.png")}
alt="Logo"
style={styles.image}
/>
<Text fontSize="4xl" style={styles.title}>
Login Form
</Text>
<Input
placeholder="Email"
onChangeText={(text) => {
setState({ password: text });
}}
onBlur={() => emailValidator()}
variant="rounded"
marginX={10}
marginY={5}
InputLeftElement={
<Icon
as={<AntDesign name="user" size={24} />}
size={5}
ml="2"
color="red.900"
/>
}
/>
<Text style={styles.error}>{state.emailError}</Text>
<Input
placeholder="Password"
secureTextEntry={true}
onChangeText={(text) => {
setState({ email: text });
}}
variant="rounded"
marginX={10}
InputLeftElement={
<Icon
as={<Entypo name="lock-open" size={24} />}
size={5}
ml="2"
color="red.900"
/>
}
/>
<Button
colorScheme="primary"
mt={7}
fontSize={20}
size="lg"
onPress={() => {
console.log("hello");
}}
>
Login
</Button>
</Center>
<Center>
<Stack direction="row" space="2" mt={6}>
<Checkbox size="sm" color="blue.50">
<Text fontSize="md" style={{ color: "white" }}>
Remember Password
</Text>
</Checkbox>
<Text fontSize="md" ml={10} style={styles.forget}>
Forget Password
</Text>
</Stack>
<Divider mt={5} width={350} />
<Text style={{ paddingTop: 10, fontWeight: "bold", color: "white" }}>
If you don't Have an accout ?
</Text>
<TouchableOpacity style={styles.areadyButton}>
<Text style={styles.alreadyText}>Create An Account</Text>
</TouchableOpacity>
<Divider w={290} bg="indigo.500" thickness={4} />
<Text fontSize="md" style={styles.other}>
Or Login With
</Text>
<Flex direction="row" h="58" p="4">
<TouchableOpacity>
<AntDesign name="google" size={25} color="red" />
</TouchableOpacity>
<Divider
bg="emerald.500"
thickness="5"
mx="3"
orientation="vertical"
/>
<TouchableOpacity>
<Feather name="facebook" size={25} color="white" />
</TouchableOpacity>
<Divider
bg="indigo.500"
thickness="5"
mx="3"
orientation="vertical"
/>
<TouchableOpacity>
<Feather name="twitter" size={25} color="blue" />
</TouchableOpacity>
</Flex>
</Center>
</View>
</LinearGradient>
);
};
export default Main;
const styles = StyleSheet.create({
image: {
height: 110,
width: 110,
borderRadius: 100,
marginTop: 25,
},
title: {
paddingTop: 10,
fontWeight: "bold",
},
areadyButton: {
marginVertical: 20,
},
alreadyText: {
padding: 15,
paddingLeft: 30,
paddingRight: 30,
fontSize: 15,
fontWeight: "bold",
borderWidth: 1,
borderColor: "white",
color: "#397eed",
borderRadius: 35,
},
createAccountButton: {
marginTop: 30,
},
createAccountText: {
color: "white",
fontSize: 19,
},
texts: {
color: "white",
},
forget: {
color: "white",
},
other: {
paddingVertical: 10,
color: "white",
fontWeight: "bold",
color: "orange",
},
error: {
color: "red",
},
});
CodePudding user response：
Check the following code or https://snack.expo.dev/jccB3ldkt
import React, { useState } from "react";
import { View, StyleSheet, TouchableOpacity } from "react-native";
import {
Avatar,
Center,
Image,
Text,
Input,
Icon,
Button,
Stack,
Checkbox,
Divider,
Flex,
NativeBaseProvider
} from "native-base";
import { LinearGradient } from "expo-linear-gradient";
import { AntDesign } from "@expo/vector-icons";
import { Entypo } from "@expo/vector-icons";
import { Feather } from "@expo/vector-icons";
const Main = () => {
const [state, setState] = useState({
email: "",
emailError: "",
password: "",
});
const emailValidator = () => {
if (state.email == "") {
setState({...state, emailError: "Email Field canot be empty" });
} else {
setState({...state, emailError: "" });
}
};
return (
<NativeBaseProvider>
<LinearGradient height="100%" colors={["#4c669f", "#3b5998", "#192f6a"]}>
<View>
<Center>
<Image
source={''}
alt="Logo"
style={styles.image}
/>
<Text fontSize="4xl" style={styles.title}>
Login Form
</Text>
<Input
placeholder="Email"
onChangeText={(text) => {
setState({ email: text });
}}
onBlur={() => emailValidator()}
variant="rounded"
marginX={10}
marginY={5}
InputLeftElement={
<Icon
as={<AntDesign name="user" size={24} />}
size={5}
ml="2"
color="red.900"
/>
}
/>
<Text style={styles.error}>{state.emailError}</Text>
<Input
placeholder="Password"
secureTextEntry={true}
onChangeText={(text) => {
setState({ password: text });
}}
variant="rounded"
marginX={10}
InputLeftElement={
<Icon
as={<Entypo name="lock-open" size={24} />}
size={5}
ml="2"
color="red.900"
/>
}
/>
<Button
colorScheme="primary"
mt={7}
fontSize={20}
size="lg"
onPress={() => {
console.log("hello");
}}
>
Login
</Button>
</Center>
<Center>
<Stack direction="row" space="2" mt={6}>
<Checkbox size="sm" color="blue.50">
<Text fontSize="md" style={{ color: "white" }}>
Remember Password
</Text>
</Checkbox>
<Text fontSize="md" ml={10} style={styles.forget}>
Forget Password
</Text>
</Stack>
<Divider mt={5} width={350} />
<Text style={{ paddingTop: 10, fontWeight: "bold", color: "white" }}>
If you don't Have an accout ?
</Text>
<TouchableOpacity style={styles.areadyButton}>
<Text style={styles.alreadyText}>Create An Account</Text>
</TouchableOpacity>
<Divider w={290} bg="indigo.500" thickness={4} />
<Text fontSize="md" style={styles.other}>
Or Login With
</Text>
<Flex direction="row" h="58" p="4">
<TouchableOpacity>
<AntDesign name="google" size={25} color="red" />
</TouchableOpacity>
<Divider
bg="emerald.500"
thickness="5"
mx="3"
orientation="vertical"
/>
<TouchableOpacity>
<Feather name="facebook" size={25} color="white" />
</TouchableOpacity>
<Divider
bg="indigo.500"
thickness="5"
mx="3"
orientation="vertical"
/>
<TouchableOpacity>
<Feather name="twitter" size={25} color="blue" />
</TouchableOpacity>
</Flex>
</Center>
</View>
</LinearGradient>
</NativeBaseProvider>
);
};
export default Main;
const styles = StyleSheet.create({
image: {
height: 110,
width: 110,
borderRadius: 100,
marginTop: 25,
},
title: {
paddingTop: 10,
fontWeight: "bold",
},
areadyButton: {
marginVertical: 20,
},
alreadyText: {
padding: 15,
paddingLeft: 30,
paddingRight: 30,
fontSize: 15,
fontWeight: "bold",
borderWidth: 1,
borderColor: "white",
color: "#397eed",
borderRadius: 35,
},
createAccountButton: {
marginTop: 30,
},
createAccountText: {
color: "white",
fontSize: 19,
},
texts: {
color: "white",
},
forget: {
color: "white",
},
other: {
paddingVertical: 10,
color: "white",
fontWeight: "bold",
color: "orange",
},
error: {
color: "red",
},
});
CodePudding user response：
You already have an emailValidator function, what prevents you from doing the same for your password etc? to disable the submit button, you can add a CSS class to it as a state and change it once the inputs are valid.
for the email for example, you can use state.mail.includes("@") etc.
The button change can be done for example by adding a dynamic CSS state and the alert can be implemented at the end of every check.