diff --git a/src/components/Contact.js b/src/components/Contact.js index 23aa9db..0b34510 100644 --- a/src/components/Contact.js +++ b/src/components/Contact.js @@ -16,15 +16,16 @@ const GlobalStyle = createGlobalStyle` } `; - class ContactForm extends Component { + constructor(props) { super(props); this.state = { name: '', email: '', subject: '', - message: '' + message: '', + error:'' }; this.handleNameChange = this.handleNameChange.bind(this); @@ -33,6 +34,7 @@ class ContactForm extends Component { this.handleMessageChange = this.handleMessageChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } + handleNameChange(event) { this.setState({ name: event.target.value @@ -58,6 +60,17 @@ class ContactForm extends Component { } async handleSubmit(event) { + event.preventDefault(); + var i = 0; + for (let key in this.state) { + if (this.state[key] === '' && i<4) { + this.setState({error: `You must provide a ${key}`}); + return + } + i++; + } + this.setState({error: ``}); + alert('You will get and email from us shortly!'); alert('These are the details you have submitted!'); alert(this.state.name); @@ -65,8 +78,6 @@ class ContactForm extends Component { alert(this.state.subject); alert(this.state.message); - event.preventDefault(); - emailjs.sendForm('service_5ggwj8d', 'template_jirc6zm', event.target, 'user_XtSzEFFNtc4C6IEpGN9JS') .then((result) => { console.log(result.text); @@ -106,6 +117,11 @@ class ContactForm extends Component { name="message" onChange={this.handleMessageChange} /> + +

{this.state.error}

+

+
+ Send Message