Hello I have made a function in order to check for the format the user has enter. However I do not know how to print a message if the format is wrong.
function emailIsValid (emailInput) {
//var check = /\S+@\S+\.\S/.test(emailInput);
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if( re.test(String(emailInput).toLowerCase()))
{
return true;
}
}
export default function Contact() {
const [nameInput, setName] = React.useState("");
const [emailInput, setEmail] = React.useState("");
const [messageInput, setMessageInput] = React.useState("");
var emailCheck = emailIsValid(emailInput);
const enables = messageInput.length > 0 && emailInput.length > 0 && nameInput.length > 0 && emailCheck;
return (
<div className="App">
<div className="header">
<div className="logo">
Chavy
</div>
<div className="menu">
<Link className="link" activeonlywhenexact="true" to="/">
<span className="title" style={{cursor:"pointer"}}>Home</span>
<span className="bar"></span>
</Link>
<Link className="link" to="/workSection">
<span className="title" style={{cursor:"pointer"}}>Work</span>
<span className="bar"></span>
</Link>
<Link className="link" to="/contact">
<span className="title" style={{cursor:"pointer"}}>Contact</span>
<span className="bar"></span>
</Link>
</div>
</div>
<div className="container">
<div className="row">
<div className="column">
<img src={logo} style={{height:"500px", width:"600px"}} alt="logo"/>
</div>
<div className="row">
<div className="column column-10"><hr className="style-four"></hr></div>
<p style={{margin:"30px"}}>
---
</p>
<label htmlFor="fname" style={{fontSize:"20px", fontWeight:"200"}}>Full Name:</label>
<br />
<input type="text" id="firstname" placeholder="Your name:"
value={nameInput}
name="name"
onChange={event => {
const value = event.target.value;
setName(value);
}}
required
/>
<br />
<div style={{margin:"30px"}}>
<label htmlFor="lname" style={{fontSize:"20px", fontWeight:"200"}}>Email:</label>
<br />
<input type="email" id="email" placeholder="Your email:"
value={emailInput}
name="email"
onChange={event => {
const value = event.target.value;
setEmail(value);
}}
required
/>
<br />
</div>
<div style={{margin:"30px"}}>
<label htmlFor="textarea" style={{fontSize:"20px", fontWeight:"200"}}>Message:</label>
<br />
<textarea id="message" placeholder="Type your message here:"
value={messageInput}
onChange={event => {
const value = event.target.value;
setMessageInput(value);
}}
name="message"
required
/>
<br />
<Link to="/contactAfter">
<button
disabled={!enables}
onClick={() =>
sendMessage(messageInput,emailInput,nameInput)
}
className="myButton"
name = "messageInput"
>Send Message</button></Link>
</div>
</div>
</div>
whenever the user is done writing his email, I want to not let him send a message if the email has a wrong format. This info is being sent to a db in firebase.
