How can I validate React input is not empty and valid email?-CodePudding

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

CodePudding user response：

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
        }
};