Skip to content

Commit 31e26c4

Browse files
prajwalkulkarniprajwalkulkarni
committed
Add contact form validation
1 parent 91e88d7 commit 31e26c4

File tree

2 files changed

+167
-93
lines changed

2 files changed

+167
-93
lines changed

‎src/pages/Contact.js‎

Lines changed: 160 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,168 @@
11
/* eslint-disable react/function-component-definition */
2-
import React from 'react';
2+
import React, { useState } from 'react';
33
import '../styles/Contact.css';
44
import { Container, Row, Col, Form, Button } from 'react-bootstrap';
55
import { ImTwitter, ImMail, ImGithub } from 'react-icons/im';
66
import { FaGitter } from 'react-icons/fa';
77

8-
const Contact = () => (
9-
<Container>
10-
<h1 className="mt-4">Contact Us</h1>
11-
<p>Ideas? Comments? Critiques? Want to help out? Here’s how to get in contact:</p>
12-
<Row className='contact-card-one'>
13-
<Col md={6}>
14-
<div className='contact-card' style={{ color: '#E74D3C' }}>
15-
<ImMail size={150} />
16-
<p>
17-
<a href='mailto:[email protected]'>[email protected]</a>
18-
</p>
19-
</div>
20-
</Col>
21-
<Col md={6}>
22-
<div className='contact-card' style={{ color: '#4C4C4D' }}>
23-
<ImGithub size={150} />
24-
<p>
25-
<a href='https://github.com/codeisscience' target='_blank' rel='noreferrer'>
26-
GitHub
27-
</a>
28-
</p>
29-
</div>
30-
</Col>
31-
</Row>
32-
<Row className='contact-card-two'>
33-
<Col md={6}>
34-
<div className='contact-card' style={{ color: '#3D9DD9' }}>
35-
<ImTwitter size={150} />
36-
<p>
37-
<a href='https://twitter.com/codeisscience' target='_blank' rel='noreferrer'>
38-
@codeisscience
39-
</a>
40-
</p>
41-
</div>
42-
</Col>
43-
<Col md={6}>
44-
<div className='contact-card' style={{ color: '#4C4C4D' }}>
45-
<FaGitter size={150} />
46-
<p>
47-
<a href='https://gitter.im/codeisscience/Lobby' target='_blank' rel='noreferrer'>
48-
Gitter
49-
</a>
50-
</p>
51-
</div>
52-
</Col>
53-
</Row>
54-
<hr />
55-
<Row>
56-
<Col md={6} className='contact-form'>
57-
<Form>
58-
<Form.Group as={Row} controlId='formHorizontalEmail'>
59-
<Form.Label column sm={2}>
60-
Email
61-
</Form.Label>
62-
<Col sm={10}>
63-
<Form.Control type='email' placeholder='[email protected]' />
64-
</Col>
65-
</Form.Group>
66-
<br />
67-
<Form.Group as={Row} controlId='formHorizontalSubject'>
68-
<Form.Label column sm={2}>
69-
Subject
70-
</Form.Label>
71-
<Col sm={10}>
72-
<Form.Control type='text' placeholder='Code is Science' />
73-
</Col>
74-
</Form.Group>
75-
<br />
76-
<Form.Group as={Row} controlId='formHorizontalMessage'>
77-
<Form.Label column sm={2}>
78-
Message
79-
</Form.Label>
80-
<Col sm={10}>
81-
<Form.Control as="textarea" rows={3} placeholder="Enter your message here..." />
82-
</Col>
83-
</Form.Group>
84-
<Form.Group as={Row} controlId='formHorizontalCheck' className='mt-3'>
85-
<Col sm={{ span: 10, offset: 2 }}>
86-
<Form.Check label='Remember me' />
87-
</Col>
88-
</Form.Group>
8+
const Contact = () => {
9+
let formIsValid = false
8910

90-
<Form.Group as={Row} className='mt-3'>
91-
<Col sm={{ span: 10, offset: 2 }}>
92-
<Button type='submit'>Send</Button>
93-
</Col>
94-
</Form.Group>
95-
</Form>
96-
</Col>
97-
</Row>
98-
</Container>
99-
);
11+
const [email, setEmailAttr] = useState({
12+
value: '',
13+
focused: false
14+
})
15+
const [subject, setSubjectAttr] = useState({
16+
value: '',
17+
focused: false
18+
})
19+
const [message, setMessageAttr] = useState({
20+
value: '',
21+
focused: false
22+
})
10023

101-
export default Contact;
24+
25+
const setEmailVal = e => setEmailAttr(prev => ({ ...prev, value: e.target.value }))
26+
const setSubjectVal = e => setSubjectAttr(prev => ({ ...prev, value: e.target.value }))
27+
const setMsgVal = e => setMessageAttr(prev => ({ ...prev, value: e.target.value }))
28+
29+
const setEmailFocus = () => setEmailAttr(prev => ({ ...prev, focused: true }))
30+
const setSubjectFocus = () => setSubjectAttr(prev => ({ ...prev, focused: true }))
31+
const setMsgFocus = () => setMessageAttr(prev => ({ ...prev, focused: true }))
32+
33+
const emailIsValid = !!email.value
34+
const subjectIsValid = !!subject.value
35+
const messageIsValid = !!message.value
36+
37+
const emailIsInvalid = email.focused && !emailIsValid
38+
const subjectIsInvalid = subject.focused && !subjectIsValid
39+
const messageIsInvalid = message.focused && !messageIsValid
40+
41+
formIsValid = emailIsValid && subjectIsValid && messageIsValid
42+
43+
const formSubmitHandler = (e) => {
44+
e.preventDefault()
45+
46+
if (!formIsValid) {
47+
console.log("INVALID FORM")
48+
return
49+
}
50+
51+
console.log("PERFORM NETWORK REQUEST HERE")
52+
setEmailAttr({value:'',focused:false})
53+
setSubjectAttr({value:'',focused:false})
54+
setMessageAttr({value:'',focused:false})
55+
56+
}
57+
58+
return (
59+
<Container>
60+
<h1 className="mt-4">Contact Us</h1>
61+
<p>Ideas? Comments? Critiques? Want to help out? Here’s how to get in contact:</p>
62+
<Row className='contact-card-one'>
63+
<Col md={6}>
64+
<div className='contact-card' style={{ color: '#E74D3C' }}>
65+
<ImMail size={150} />
66+
<p>
67+
<a href='mailto:[email protected]'>[email protected]</a>
68+
</p>
69+
</div>
70+
</Col>
71+
<Col md={6}>
72+
<div className='contact-card' style={{ color: '#4C4C4D' }}>
73+
<ImGithub size={150} />
74+
<p>
75+
<a href='https://github.com/codeisscience' target='_blank' rel='noreferrer'>
76+
GitHub
77+
</a>
78+
</p>
79+
</div>
80+
</Col>
81+
</Row>
82+
<Row className='contact-card-two'>
83+
<Col md={6}>
84+
<div className='contact-card' style={{ color: '#3D9DD9' }}>
85+
<ImTwitter size={150} />
86+
<p>
87+
<a href='https://twitter.com/codeisscience' target='_blank' rel='noreferrer'>
88+
@codeisscience
89+
</a>
90+
</p>
91+
</div>
92+
</Col>
93+
<Col md={6}>
94+
<div className='contact-card' style={{ color: '#4C4C4D' }}>
95+
<FaGitter size={150} />
96+
<p>
97+
<a href='https://gitter.im/codeisscience/Lobby' target='_blank' rel='noreferrer'>
98+
Gitter
99+
</a>
100+
</p>
101+
</div>
102+
</Col>
103+
</Row>
104+
<hr />
105+
<Row>
106+
<Col md={6} className='contact-form'>
107+
<Form onSubmit={formSubmitHandler}>
108+
<Form.Group as={Row} controlId='formHorizontalEmail'>
109+
<Form.Label column sm={2}>
110+
Email
111+
</Form.Label>
112+
<Col sm={10}>
113+
<Form.Control type='email'
114+
value={email.value}
115+
onChange={setEmailVal}
116+
onBlur={setEmailFocus}
117+
placeholder='[email protected]' />
118+
{emailIsInvalid && <p className='invalidInput'>Email cannot be empty.</p>}
119+
</Col>
120+
</Form.Group>
121+
<br />
122+
<Form.Group as={Row} controlId='formHorizontalSubject'>
123+
<Form.Label column sm={2}>
124+
Subject
125+
</Form.Label>
126+
<Col sm={10}>
127+
<Form.Control type='text'
128+
value={subject.value}
129+
onChange={setSubjectVal}
130+
onBlur={setSubjectFocus}
131+
placeholder='Code is Science' />
132+
{subjectIsInvalid && <p className='invalidInput'>Subject cannot be empty.</p>}
133+
</Col>
134+
</Form.Group>
135+
<br />
136+
<Form.Group as={Row} controlId='formHorizontalMessage'>
137+
<Form.Label column sm={2}>
138+
Message
139+
</Form.Label>
140+
<Col sm={10}>
141+
<Form.Control as="textarea"
142+
value={message.value}
143+
rows={3}
144+
onChange={setMsgVal}
145+
onBlur={setMsgFocus}
146+
placeholder="Enter your message here..." />
147+
{messageIsInvalid && <p className='invalidInput'>Message cannot be empty.</p>}
148+
</Col>
149+
</Form.Group>
150+
<Form.Group as={Row} controlId='formHorizontalCheck' className='mt-3'>
151+
<Col sm={{ span: 10, offset: 2 }}>
152+
<Form.Check label='Remember me' />
153+
</Col>
154+
</Form.Group>
155+
156+
<Form.Group as={Row} className='mt-3'>
157+
<Col sm={{ span: 10, offset: 2 }}>
158+
<Button type='submit' disabled={!formIsValid}>Send</Button>
159+
</Col>
160+
</Form.Group>
161+
</Form>
162+
</Col>
163+
</Row>
164+
</Container>
165+
)
166+
};
167+
168+
export default Contact;

‎src/styles/Contact.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,10 @@
1414
.contact-padding{
1515
padding-top: 8.7em;
1616
}
17+
18+
.invalidInput{
19+
color: red;
20+
font-size: small;
21+
padding: 0;
22+
margin: 0;
23+
}

0 commit comments

Comments
 (0)