Skip to content

signup form added with validation #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ajaypathakdaffo wants to merge 2 commits into
base: main
Choose a base branch
from
Open

signup form added with validation #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e0b439
signup form added with validation
ajaypathakdaffo Dec 28, 2020
fa1a2de
validation fix
ajaypathakdaffo Dec 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions source/constants/appstyle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import {Dimensions} from 'react-native';

const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
console.log('SCREEN_WIDTH ->',SCREEN_WIDTH)
console.log('SCREEN_HEIGHT ->',SCREEN_HEIGHT)

const width = 320;
const height = 568;

export const spacingHorizontal = (size) => {
return (SCREEN_WIDTH / width) * size;
};
export const spacingVertical = (size) => {
return (SCREEN_HEIGHT / height) * size;
};
35 changes: 19 additions & 16 deletions source/screens/login/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, {useState} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import {TextInput, TouchableOpacity} from 'react-native-gesture-handler';
import {spacingVertical, spacingHorizontal} from '../../constants/appstyle';

const Login = (props) => {
const [username, setUsername] = useState('');
Expand All @@ -17,9 +18,7 @@ const Login = (props) => {
}
setUsername('');
setPassword('');
};

console.log("props",props)
};

return (
<View style={styles.container}>
Expand All @@ -44,12 +43,15 @@ const Login = (props) => {
/>
<TouchableOpacity style={styles.buttonStyle} onPress={() => loginPress()}>
<Text>Login</Text>
</TouchableOpacity>
</TouchableOpacity>

<TouchableOpacity onPress={() => {props.navigation.navigate('Signup')}}>
<Text>Signup</Text>
</TouchableOpacity>

<TouchableOpacity
style={styles.buttonStyle}
onPress={() => {
props.navigation.navigate('Signup');
}}>
<Text>Signup</Text>
</TouchableOpacity>
</View>
);
};
Expand All @@ -61,25 +63,26 @@ const styles = StyleSheet.create({
flex: 1,
},
textInputStyle: {
width: '80%',
height: 40,
width: spacingHorizontal(280),
height: spacingVertical(30),
borderBottomWidth: 1,
marginBottom: 10,
marginBottom: spacingVertical(10),
},
buttonStyle: {
backgroundColor: '#90ee90',
borderRadius: 10,
height: 40,
width: 200,
height: spacingVertical(30),
width: spacingHorizontal(200),
justifyContent: 'center',
alignItems: 'center',
margin: spacingVertical(5),
},
statusMessageContainer: {
padding: 10,
margin: 10,
padding: spacingHorizontal(10),
margin: spacingHorizontal(10),
},
statusMessagestyle: {
fontSize: 14,
fontSize: spacingHorizontal(14),
},
});

Expand Down
183 changes: 149 additions & 34 deletions source/screens/signup/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,145 @@
import React, {useState} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import {TextInput, TouchableOpacity} from 'react-native-gesture-handler';
import {
StyleSheet,
ScrollView,
View,
Text,
TextInput,
TouchableOpacity,
} from 'react-native';
import {spacingVertical, spacingHorizontal} from '../../constants/appstyle';

const Signup = () => {
const [username, setUsername] = useState('');
const [firstname, setFirstname] = useState('');
const [lastname, setLastname] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [message, setMessage] = useState('');
const [firstnameError, setFirstnameError] = useState('');
const [lastnameError, setLastnameError] = useState('');
const [emailError, setEmailError] = useState('');
const [passwordError, setPasswordError] = useState('');
const [isValid, setFormValidity] = useState(true);

const validEmailRegex = RegExp(
/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i,
);

const formField = ['firstname', 'lastname', 'email', 'password'];

const loginPress = () => {
if (username === '' || password === '') {
setMessage('please fill all the required fields !');
} else if (username === 'ajay' && password == 'hrhk@1234') {
setMessage('User login successful');
getValue = (fieldNmae) => {
if (fieldNmae === 'firstname') {
return firstname;
} else if (fieldNmae === 'lastname') {
return lastname;
} else if (fieldNmae === 'email') {
return email;
} else if (fieldNmae === 'password') {
return password;
} else if (fieldNmae === 'firstnameError') {
return firstnameError;
} else if (fieldNmae === 'lastnameError') {
return lastnameError;
} else if (fieldNmae === 'emailError') {
return emailError;
} else if (fieldNmae === 'passwordError') {
return passwordError;
}
};

validateForm = () => {
if (
firstname.length == 0 ||
lastname.length == 0 ||
password.length == 0 ||
email.length == 0
) {
return setFormValidity(true);
} else if (
firstnameError.length > 0 ||
lastnameError.length > 0 ||
passwordError.length > 0 ||
emailError.length > 0
) {
return setFormValidity(true);
} else {
setMessage('Incorrect Details');
return setFormValidity(false);
}
};
setValue = (text, fieldNmae) => {
switch (fieldNmae) {
case 'email':
setEmail(text);
validEmailRegex.test(text)
? setEmailError('')
: setEmailError('Email is not valid!');
break;
case 'password':
setPassword(text);
text.length < 8
? setPasswordError('Password must be 8 characters long!')
: setPasswordError('');
break;
case 'firstname':
setFirstname(text);
text.length < 2
? setFirstnameError(
'first name should be greater then 2 characters long!',
)
: setFirstnameError('');
break;
case 'lastname':
setLastname(text);
text.length < 2
? setLastnameError(
'last name should be greater then 2 characters long!',
)
: setLastnameError('');
break;
default:
break;
}
setUsername('');
setPassword('');
validateForm();
};

return (
<View style={styles.container}>
{formField.map((field) => {
<TextInput
style={styles.textInputStyle}
onChangeText={(text) => setUsername(text)}
placeholder={field}
value={field}
required
/>;
})}
submit = () => {
if (!isValid) {
console.log('Signup successful');
}
};

<TouchableOpacity style={styles.buttonStyle} onPress={() => loginPress()}>
<Text>Sign up</Text>
</TouchableOpacity>
</View>
return (
<ScrollView
contentContainerStyle={{flexGrow: 1}}
keyboardShouldPersistTaps="handled">
<View style={styles.container}>
{formField.map((field) => {
return (
<View key={field}>
<TextInput
style={styles.textInputStyle}
onChangeText={(text) => setValue(text, field)}
placeholder={field}
value={getValue(field)}
required
/>
<View style={styles.errorViewStyle}>
{true ? (
<Text style={styles.errorText}>
{getValue(`${field}Error`)}
</Text>
) : null}
</View>
</View>
);
})}
<TouchableOpacity
disabled={isValid}
style={styles.buttonStyle}
onPress={() => submit()}>
<Text>Sign up</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
};

Expand All @@ -46,24 +150,35 @@ const styles = StyleSheet.create({
flex: 1,
},
textInputStyle: {
width: '80%',
height: 40,
width: spacingHorizontal(280),
height: spacingVertical(30),
borderBottomWidth: 1,
marginBottom: 10,
marginBottom: spacingVertical(10),
fontSize: 20,
},
buttonStyle: {
backgroundColor: '#90ee90',
borderRadius: 10,
height: 40,
width: 200,
height: spacingVertical(30),
width: spacingHorizontal(200),
justifyContent: 'center',
alignItems: 'center',
margin: spacingVertical(5),
},
statusMessageContainer: {
padding: 10,
margin: 10,
padding: spacingHorizontal(10),
margin: spacingHorizontal(10),
},
statusMessagestyle: {
fontSize: spacingHorizontal(14),
},
errorViewStyle: {
height: spacingVertical(14),
borderRadius: 10,
alignItems: 'flex-end',
},
errorText: {
color: '#ff6600',
fontSize: 14,
},
});
Expand Down