Sunny Negi / Meteor-projects

Download as
Browse Code ยป

Commit b66d66a1a80debbe701154c5d73a76fd842d6442

Authored by Rafael Arenas Schuchowsky
1 parent 974e40ec3c
Exists in master

Added validation on all fields

Showing 4 changed files with 131 additions and 33 deletions   Show diff stats
imports/client/views/core/ErrorLabel.js
Diff comments   View file @b66d66a
... ... @@ -3,15 +3,13 @@ import React, { PropTypes } from 'react'
3 3 const ErrorLabel = props => (
4 4 <label
5 5 className="validation-error-label"
6   - htmlFor={props.field}
7 6 >
8 7 {props.children}
9 8 </label>
10 9 )
11 10  
12 11 ErrorLabel.propTypes = {
13   - field: PropTypes.string.isRequired,
14   - children: PropTypes.string.isRequired,
  12 + children: PropTypes.any.isRequired,
15 13 }
16 14  
17 15 export default ErrorLabel
... ...
imports/client/views/core/Label.js
Diff comments   View file @b66d66a
... ... @@ -2,7 +2,7 @@ import React, { PropTypes } from &#39;react&#39;
2 2  
3 3 const Label = props => (
4 4 <label>
5   - {props.children}
  5 + {props.children} {' '}
6 6 {props.required && (
7 7 <span className="text-danger">*</span>
8 8 )}
... ...
imports/client/views/org/admin/students/AddStudentFormContainer.js
Diff comments   View file @b66d66a
... ... @@ -3,7 +3,8 @@ import { AddStudentForm } from &#39;./addStudentForm&#39;
3 3 import StudentForm from './StudentForm'
4 4 import Form from '../../../core/Form'
5 5 import Validator from '../../../core/Validator'
6   -import { isRequired } from '../../../core/validations'
  6 +import { isRequired, isValidEmail } from '../../../core/validations'
  7 +import { addStudentManually } from '/imports/collections/students/methods';
7 8  
8 9 export class AddStudentFormContainer extends Component {
9 10  
... ... @@ -16,10 +17,8 @@ export class AddStudentFormContainer extends Component {
16 17 }
17 18  
18 19 handleNextClick() {
19   - console.log('handleNextClick', this.validator.getErrors())
20 20 this.form.handleSubmit()
21 21 if (this.validator.getErrors() && Object.keys(this.validator.getErrors()).length > 0) return
22   - console.log('no errors')
23 22 this.setState({ currentStep: this.state.currentStep + 1 })
24 23 this.form.resetSubmitted()
25 24 }
... ... @@ -30,7 +29,7 @@ export class AddStudentFormContainer extends Component {
30 29  
31 30 handleSubmit() {
32 31 if (this.state.currentStep === 2) {
33   - alert('should submit')
  32 + addStudentManually.call(this.form.state.values)
34 33 }
35 34 }
36 35  
... ... @@ -43,6 +42,32 @@ export class AddStudentFormContainer extends Component {
43 42 ref={validator => this.validator = validator}
44 43 validations={{
45 44 admissionId: [isRequired],
  45 + firstName: [isRequired],
  46 + middleName: [isRequired],
  47 + lastName: [isRequired],
  48 + email: [isRequired, isValidEmail],
  49 + dob: [isRequired],
  50 + formattedDob: [isRequired],
  51 + gender: [isRequired],
  52 + rollNo: [(value) => this.state.currentStep === 1 && isRequired(value)],
  53 + class: [(value) => this.state.currentStep === 1 && isRequired(value)],
  54 + section: [(value) => this.state.currentStep === 1 && isRequired(value)],
  55 + community: [(value) => this.state.currentStep === 1 && isRequired(value)],
  56 + bloodGroup: [(value) => this.state.currentStep === 1 && isRequired(value)],
  57 + phone: [(value) => this.state.currentStep === 1 && isRequired(value)],
  58 + address: [(value) => this.state.currentStep === 1 && isRequired(value)],
  59 + city: [(value) => this.state.currentStep === 1 && isRequired(value)],
  60 + state: [(value) => this.state.currentStep === 1 && isRequired(value)],
  61 + parentName: [(value) => this.state.currentStep === 2 && isRequired(value)],
  62 + parentEmail: [(value) => this.state.currentStep === 2 && isRequired(value), (value) => this.state.currentStep === 2 && isValidEmail(value)],
  63 + relation: [(value) => this.state.currentStep === 2 && isRequired(value)],
  64 + profession: [(value) => this.state.currentStep === 2 && isRequired(value)],
  65 + parentGender: [(value) => this.state.currentStep === 2 && isRequired(value)],
  66 + parentPhone: [(value) => this.state.currentStep === 2 && isRequired(value)],
  67 + parentAddress: [(value) => this.state.currentStep === 2 && isRequired(value)],
  68 + parentCity: [(value) => this.state.currentStep === 2 && isRequired(value)],
  69 + parentState: [(value) => this.state.currentStep === 2 && isRequired(value)],
  70 + parentZipcode: [(value) => this.state.currentStep === 2 && isRequired(value)],
46 71 }}
47 72 >
48 73 {({ errors }) => (
... ...
imports/client/views/org/admin/students/StudentForm.js
Diff comments   View file @b66d66a
... ... @@ -49,67 +49,85 @@ const StudentForm = props =&gt; (
49 49 </Col>
50 50 <Col xs={12} sm={6}>
51 51 <FormGroup controlId="firstName">
52   - <Label>First Name</Label>
  52 + <Label required>First Name</Label>
53 53 <FormControl
54 54 type="text"
55 55 value={props.getValue('firstName')}
56 56 placeholder="First Name"
57 57 onChange={e => props.setValue('firstName', e.target.value)}
58 58 />
  59 + {props.isSubmitted() && props.errors && props.errors.firstName && (
  60 + <ErrorLabel> {props.errors.firstName} </ErrorLabel>
  61 + )}
59 62 </FormGroup>
60 63 </Col>
61 64 </Row>
62 65 <Row>
63 66 <Col xs={12} sm={6}>
64 67 <FormGroup controlId="middleName">
65   - <Label>Middle Name</Label>
  68 + <Label required>Middle Name</Label>
66 69 <FormControl
67 70 type="text"
68 71 value={props.getValue('middleName')}
69 72 placeholder="Middle Name"
70 73 onChange={e => props.setValue('middleName', e.target.value)}
71 74 />
  75 + {props.isSubmitted() && props.errors && props.errors.middleName && (
  76 + <ErrorLabel> {props.errors.middleName} </ErrorLabel>
  77 + )}
72 78 </FormGroup>
73 79 </Col>
74 80 <Col xs={12} sm={6}>
75 81 <FormGroup controlId="lastName">
76   - <Label>Last Name</Label>
  82 + <Label required>Last Name</Label>
77 83 <FormControl
78 84 type="text"
79 85 value={props.getValue('lastName')}
80 86 placeholder="Last Name"
81 87 onChange={e => props.setValue('lastName', e.target.value)}
82 88 />
  89 + {props.isSubmitted() && props.errors && props.errors.lastName && (
  90 + <ErrorLabel> {props.errors.lastName} </ErrorLabel>
  91 + )}
83 92 </FormGroup>
84 93 </Col>
85 94 </Row>
86 95 <Row>
87 96 <Col xs={12} sm={6}>
88 97 <FormGroup controlId="email">
89   - <Label>Email</Label>
  98 + <Label required>Email</Label>
90 99 <FormControl
91 100 type="email"
92 101 value={props.getValue('email')}
93 102 placeholder="Email"
94 103 onChange={e => props.setValue('email', e.target.value)}
95 104 />
  105 + {props.isSubmitted() && props.errors && props.errors.email && (
  106 + <ErrorLabel> {props.errors.email} </ErrorLabel>
  107 + )}
96 108 </FormGroup>
97 109 </Col>
98 110 <Col xs={12} sm={6}>
99 111 <FormGroup>
100   - <Label>Date of birth</Label>
  112 + <Label required>Date of birth</Label>
101 113 <DatePicker
102 114 id="dob"
103 115 value={props.getValue('dob')}
104   - onChange={value => props.setValue('dob', value)}
  116 + onChange={(value, formattedValue) => {
  117 + props.setValue('dob', value)
  118 + props.setValue('formattedDob', formattedValue)
  119 + }}
105 120 />
  121 + {props.isSubmitted() && props.errors && props.errors.dob && (
  122 + <ErrorLabel> {props.errors.dob} </ErrorLabel>
  123 + )}
106 124 </FormGroup>
107 125 </Col>
108 126 </Row>
109 127 <Row>
110 128 <Col xs={12} sm={6}>
111 129 <FormGroup controlId="formControlsSelect">
112   - <Label>Gender</Label>
  130 + <Label required>Gender</Label>
113 131 <FormControl componentClass="select"
114 132 placeholder="select"
115 133 value={props.getValue('gender')}
... ... @@ -118,6 +136,9 @@ const StudentForm = props =&gt; (
118 136 <option value="male">Male</option>
119 137 <option value="female">Female</option>
120 138 </FormControl>
  139 + {props.isSubmitted() && props.errors && props.errors.gender && (
  140 + <ErrorLabel> {props.errors.gender} </ErrorLabel>
  141 + )}
121 142 </FormGroup>
122 143 </Col>
123 144 </Row>
... ... @@ -129,109 +150,136 @@ const StudentForm = props =&gt; (
129 150 <Row>
130 151 <Col xs={12} sm={6}>
131 152 <FormGroup controlId="rollNo">
132   - <Label>Roll No</Label>
  153 + <Label required>Roll No</Label>
133 154 <FormControl
134 155 type="text"
135 156 value={props.getValue('rollNo')}
136 157 placeholder="Roll No"
137 158 onChange={e => props.setValue('rollNo', e.target.value)}
138 159 />
  160 + {props.isSubmitted() && props.errors && props.errors.rollNo && (
  161 + <ErrorLabel> {props.errors.rollNo} </ErrorLabel>
  162 + )}
139 163 </FormGroup>
140 164 </Col>
141 165 <Col xs={12} sm={6}>
142 166 <FormGroup controlId="class">
143   - <Label>Class</Label>
  167 + <Label required>Class</Label>
144 168 <FormControl
145 169 type="text"
146 170 value={props.getValue('class')}
147 171 placeholder="7"
148 172 onChange={e => props.setValue('class', e.target.value)}
149 173 />
  174 + {props.isSubmitted() && props.errors && props.errors.class && (
  175 + <ErrorLabel> {props.errors.class} </ErrorLabel>
  176 + )}
150 177 </FormGroup>
151 178 </Col>
152 179 </Row>
153 180 <Row>
154 181 <Col xs={12} sm={6}>
155 182 <FormGroup controlId="section">
156   - <Label>Section</Label>
  183 + <Label required>Section</Label>
157 184 <FormControl
158 185 type="text"
159 186 value={props.getValue('section')}
160 187 placeholder="B"
161 188 onChange={e => props.setValue('section', e.target.value)}
162 189 />
  190 + {props.isSubmitted() && props.errors && props.errors.section && (
  191 + <ErrorLabel> {props.errors.section} </ErrorLabel>
  192 + )}
163 193 </FormGroup>
164 194 </Col>
165 195 <Col xs={12} sm={6}>
166 196 <FormGroup controlId="community">
167   - <Label>Community</Label>
  197 + <Label required>Community</Label>
168 198 <FormControl
169 199 type="text"
170 200 value={props.getValue('community')}
171 201 placeholder="General"
172 202 onChange={e => props.setValue('community', e.target.value)}
173 203 />
  204 + {props.isSubmitted() && props.errors && props.errors.community && (
  205 + <ErrorLabel> {props.errors.community} </ErrorLabel>
  206 + )}
174 207 </FormGroup>
175 208 </Col>
176 209 </Row>
177 210 <Row>
178 211 <Col xs={12} sm={6}>
179 212 <FormGroup controlId="bloodGroup">
180   - <Label>bloodGroup</Label>
  213 + <Label required>bloodGroup</Label>
181 214 <FormControl
182 215 type="text"
183 216 value={props.getValue('bloodGroup')}
184 217 placeholder="B+"
185 218 onChange={e => props.setValue('bloodGroup', e.target.value)}
186 219 />
  220 + {props.isSubmitted() && props.errors && props.errors.bloodGroup && (
  221 + <ErrorLabel> {props.errors.bloodGroup} </ErrorLabel>
  222 + )}
187 223 </FormGroup>
188 224 </Col>
189 225 <Col xs={12} sm={6}>
190 226 <FormGroup controlId="phone">
191   - <Label>Phone</Label>
  227 + <Label required>Phone</Label>
192 228 <FormControl
193 229 type="text"
194 230 value={props.getValue('phone')}
195 231 placeholder="9999999999"
196 232 onChange={e => props.setValue('phone', e.target.value)}
197 233 />
  234 + {props.isSubmitted() && props.errors && props.errors.phone && (
  235 + <ErrorLabel> {props.errors.phone} </ErrorLabel>
  236 + )}
198 237 </FormGroup>
199 238 </Col>
200 239 </Row>
201 240 <Row>
202 241 <Col xs={12} sm={6}>
203 242 <FormGroup controlId="address">
204   - <Label>Address</Label>
  243 + <Label required>Address</Label>
205 244 <FormControl
206 245 type="text"
207 246 value={props.getValue('address')}
208 247 placeholder="#876, Street, town"
209 248 onChange={e => props.setValue('address', e.target.value)}
210 249 />
  250 + {props.isSubmitted() && props.errors && props.errors.address && (
  251 + <ErrorLabel> {props.errors.address} </ErrorLabel>
  252 + )}
211 253 </FormGroup>
212 254 </Col>
213 255 <Col xs={12} sm={6}>
214 256 <FormGroup controlId="city">
215   - <Label>City</Label>
  257 + <Label required>City</Label>
216 258 <FormControl
217 259 type="text"
218 260 value={props.getValue('city')}
219 261 placeholder="Chennai"
220 262 onChange={e => props.setValue('city', e.target.value)}
221 263 />
  264 + {props.isSubmitted() && props.errors && props.errors.city && (
  265 + <ErrorLabel> {props.errors.city} </ErrorLabel>
  266 + )}
222 267 </FormGroup>
223 268 </Col>
224 269 </Row>
225 270 <Row>
226 271 <Col xs={12} sm={6}>
227 272 <FormGroup controlId="state">
228   - <Label>State</Label>
  273 + <Label required>State</Label>
229 274 <FormControl
230 275 type="text"
231 276 value={props.getValue('state')}
232 277 placeholder="Tamilnadu"
233 278 onChange={e => props.setValue('state', e.target.value)}
234 279 />
  280 + {props.isSubmitted() && props.errors && props.errors.state && (
  281 + <ErrorLabel> {props.errors.state} </ErrorLabel>
  282 + )}
235 283 </FormGroup>
236 284 </Col>
237 285 </Row>
... ... @@ -243,55 +291,67 @@ const StudentForm = props =&gt; (
243 291 <Row>
244 292 <Col xs={12} sm={6}>
245 293 <FormGroup controlId="parentName">
246   - <Label>Parent Name</Label>
  294 + <Label required>Parent Name</Label>
247 295 <FormControl
248 296 type="text"
249 297 value={props.getValue('parentName')}
250 298 placeholder="John"
251 299 onChange={e => props.setValue('parentName', e.target.value)}
252 300 />
  301 + {props.isSubmitted() && props.errors && props.errors.parentName && (
  302 + <ErrorLabel> {props.errors.parentName} </ErrorLabel>
  303 + )}
253 304 </FormGroup>
254 305 </Col>
255 306 <Col xs={12} sm={6}>
256 307 <FormGroup controlId="parentEmail">
257   - <Label>Parent Email</Label>
  308 + <Label required>Parent Email</Label>
258 309 <FormControl
259 310 type="text"
260 311 value={props.getValue('parentEmail')}
261 312 placeholder="john@email.com"
262 313 onChange={e => props.setValue('parentEmail', e.target.value)}
263 314 />
  315 + {props.isSubmitted() && props.errors && props.errors.parentEmail && (
  316 + <ErrorLabel> {props.errors.parentEmail} </ErrorLabel>
  317 + )}
264 318 </FormGroup>
265 319 </Col>
266 320 </Row>
267 321 <Row>
268 322 <Col xs={12} sm={6}>
269 323 <FormGroup controlId="relation">
270   - <Label>Relation</Label>
  324 + <Label required>Relation</Label>
271 325 <FormControl
272 326 type="text"
273 327 value={props.getValue('relation')}
274 328 placeholder="Father"
275 329 onChange={e => props.setValue('relation', e.target.value)}
276 330 />
  331 + {props.isSubmitted() && props.errors && props.errors.relation && (
  332 + <ErrorLabel> {props.errors.relation} </ErrorLabel>
  333 + )}
277 334 </FormGroup>
278 335 </Col>
279 336 <Col xs={12} sm={6}>
280 337 <FormGroup controlId="profession">
281   - <Label>Profession</Label>
  338 + <Label required>Profession</Label>
282 339 <FormControl
283 340 type="text"
284 341 value={props.getValue('profession')}
285 342 placeholder="Farmer"
286 343 onChange={e => props.setValue('profession', e.target.value)}
287 344 />
  345 + {props.isSubmitted() && props.errors && props.errors.profession && (
  346 + <ErrorLabel> {props.errors.profession} </ErrorLabel>
  347 + )}
288 348 </FormGroup>
289 349 </Col>
290 350 </Row>
291 351 <Row>
292 352 <Col xs={12} sm={6}>
293 353 <FormGroup controlId="parentGender">
294   - <Label>Parent Gender</Label>
  354 + <Label required>Parent Gender</Label>
295 355 <FormControl componentClass="select"
296 356 placeholder="select"
297 357 value={props.getValue('parentGender')}
... ... @@ -300,54 +360,69 @@ const StudentForm = props =&gt; (
300 360 <option value="male">Male</option>
301 361 <option value="female">Female</option>
302 362 </FormControl>
  363 + {props.isSubmitted() && props.errors && props.errors.parentGender && (
  364 + <ErrorLabel> {props.errors.parentGender} </ErrorLabel>
  365 + )}
303 366 </FormGroup>
304 367 </Col>
305 368 <Col xs={12} sm={6}>
306 369 <FormGroup controlId="parentPhone">
307   - <Label>Parent Phone</Label>
  370 + <Label required>Parent Phone</Label>
308 371 <FormControl
309 372 type="text"
310 373 value={props.getValue('parentPhone')}
311 374 placeholder="9876543210"
312 375 onChange={e => props.setValue('parentPhone', e.target.value)}
313 376 />
  377 + {props.isSubmitted() && props.errors && props.errors.parentPhone && (
  378 + <ErrorLabel> {props.errors.parentPhone} </ErrorLabel>
  379 + )}
314 380 </FormGroup>
315 381 </Col>
316 382 </Row>
317 383 <Row>
318 384 <Col xs={12} sm={6}>
319 385 <FormGroup controlId="parentAddress">
320   - <Label>Parent Address</Label>
  386 + <Label required>Parent Address</Label>
321 387 <FormControl
322 388 type="text"
323 389 value={props.getValue('parentAddress')}
324 390 placeholder="#12, street, town"
325 391 onChange={e => props.setValue('parentAddress', e.target.value)}
326 392 />
  393 + {props.isSubmitted() && props.errors && props.errors.parentAddress && (
  394 + <ErrorLabel> {props.errors.parentAddress} </ErrorLabel>
  395 + )}
327 396 </FormGroup>
328 397 </Col>
329 398 <Col xs={12} sm={6}>
330 399 <FormGroup controlId="parentCity">
331   - <Label>Parent City</Label>
  400 + <Label required>Parent City</Label>
332 401 <FormControl
333 402 type="text"
334 403 value={props.getValue('parentCity')}
335 404 placeholder="Chennai"
336 405 onChange={e => props.setValue('parentCity', e.target.value)}
337 406 />
  407 + {props.isSubmitted() && props.errors && props.errors.parentCity && (
  408 + <ErrorLabel> {props.errors.parentCity} </ErrorLabel>
  409 + )}
338 410 </FormGroup>
339 411 </Col>
340 412 </Row>
341 413 <Row>
342 414 <Col xs={12} sm={6}>
343 415 <FormGroup controlId="parentZipcode">
344   - <Label>Parent Zipcode</Label>
  416 + <Label required>Parent Zipcode</Label>
345 417 <FormControl
346 418 type="text"
347 419 value={props.getValue('parentZipcode')}
348 420 placeholder="600031"
349 421 onChange={e => props.setValue('parentZipcode', e.target.value)}
350 422 />
  423 + {props.isSubmitted() && props.errors && props.errors.parentZipcode && (
  424 + <ErrorLabel> {props.errors.parentZipcode} </ErrorLabel>
  425 + )}
351 426 </FormGroup>
352 427 </Col>
353 428 </Row>
... ...