现在的形式是允许空的和无效的电子邮件字符串存储到我的firestore。
在常规的html输入标签中,我知道使用required和type=email强制验证。有没有类似的东西使用脉轮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="example@gmail.com" bgColor="white" id='email' type='email' />
<Button
onClick={handleSubmit}
mt={4}
colorScheme='teal'
type='submit'
>
Submit
</Button>
</FormControl>
)
}
export default SubscribeForm
isRequired和type='email'似乎不起作用
2条答案
按热度按时间p1tboqfb1#
创建一个像这样的自定义函数:
其中showNoValidEmail是一个布尔状态,可以用于自定义html消息。
现在,在handleSubmit中,你可以这样做:
enyaitl32#
如果使用React,只需修改输入Tag,并在Tag的末尾添加
required
关键字。它还应该在
form
标记和type='submit'
的button
标记中