diff --git a/src/03-form-validator/FormValidator.js b/src/03-form-validator/FormValidator.js index d5a8bb0..d1e5cec 100644 --- a/src/03-form-validator/FormValidator.js +++ b/src/03-form-validator/FormValidator.js @@ -1,29 +1,77 @@ import { useState } from 'react' + + export default function FormValidator () { const [email, setEmail] = useState('') const [password, setPassword] = useState('') const [passwordConfirm, setPasswordConfirm] = useState('') + const [message, setMessage] = useState('') + + const isEmailValid = () => { + const emailChar = email.match(/[@]/g); + if(email.length && ('emailChar', emailChar instanceof Array) && emailChar.length === 1){ + return true; + }else{ + setMessage('The Email is invalid'); + return false; + } + }; + + const isPWValid = () => { + if(password.length >= 8) return true; + setMessage('The assword is too short'); + return false; + } + + const doPWsMatch = () => { + if(password === passwordConfirm) return true; + setMessage('Your passwords do not match'); + return false; + } + + const handleSubmit = (e) =>{ + e.preventDefault(); + let emailValid = isEmailValid(email); + let passwordValid = isPWValid(password); + let passwordsMatch = doPWsMatch(passwordConfirm); + + if(emailValid && passwordValid && passwordsMatch){ + setMessage('New User Created') + }else{ + return; + } + } + + function handleChange({target}){ + if(target.name === 'email') setEmail(target.value); + if(target.name === 'password') setPassword(target.value); + if(target.name === 'password-confirm') setPasswordConfirm(target.value); + if(message !== '') setMessage(''); + } return ( -
+{message}
+ > ) }