How Can I Validate React Input Is Not Empty and Valid Email?
Right Now the Form Is Allowing Empty and Non Valid Email Strings to Be Stored to My Firestore. in Regular Html Input Tag I Know Using Required and Type=Email...
Right now the form is allowing empty and non valid email strings to be stored to my firestore.
In regular html input tag i know using required and type=email forces the validation. Is there not something similar using Chakra Ui?
const SubscribeForm = () => {
const [input, setInput] = useState("");
const isError = input === ''
const handleSubmit = (e) => {
console.log("saved to firestore , input: " + input)
e.preventDefault();
saveEmail(input);
setInput("Thanks for subscribing!");
};
const saveEmail = async (input) => {
try {
const docRef = await addDoc(collection(db, "sub-emails"), {
email: input
});
console.log("Document written with ID: ", input);
} catch (e) {
console.error("Error adding document: " + input, e);
}
};
return (
<FormControl isRequired >
<Text paddingBottom="10px" fontSize="14px" color="white" > Get updated when site goes live!</Text>
<Input
isRequired
value={input}
onChange={(e) => setInput(e.target.value)} fontSize="13px" placeholder="[email protected]" bgColor="white" id='email' type='email' />
<Button
onClick={handleSubmit}
mt={4}
colorScheme='teal'
type='submit'
>
Submit
</Button>
</FormControl>
)
}
export default SubscribeForm
Doesn't seem like the isRequired and type='email' is working
2 Answers
Create a custom function like this:
const isValidEmail = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g;
const validateEmail = (e) => {
if(e.target?.value && e.target.value.match(isValidEmail)){
showNoValidEmail(false);
setInput(e.target.value)
}else{
showNoValidEmail(true);
}
}Where showNoValidEmail it's a boolean state and can be used with a custom html message.
Now, in your handleSubmit you can do this:
const handleSubmit = (e) => {
console.log("saved to firestore , input: " + input)
e.preventDefault();
if(input && input.length && input.match(isValidEmail)){
saveEmail(input);
setInput("Thanks for subscribing!");
}else{
//show a error message or something like that
}
};Just modify the input Tag if you're using React and add required keyword at the end of the Tag.
<input
className='p-3 flex w-full rounded-md text-black'
type='email'
name='Email'
placeholder='Enter Email'
required/>
It also should be inside a form Tag and a button of type='submit'
Sophia analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.
