gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add phone number input

Browse Source 
change validation function scheme
update validator
This commit is contained in:
Berkeley Martinez
2015-09-22 17:19:14 -07:00
parent 98af05256a
commit 70b823ca63
3 changed files with 103 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
common/app/routes/Jobs/components/NewJob.jsx
View File

@ -8,7 +8,8 @@ import {
} from 'react-bootstrap'; } from 'react-bootstrap';
import { import {
isAscii, isAscii,
isEmail isEmail,
isMobilePhone
} from 'validator'; } from 'validator';
const defaults = { const defaults = {
@ -31,13 +32,15 @@ export default contain({
position = defaultValue('string'), position = defaultValue('string'),
locale = defaultValue('string'), locale = defaultValue('string'),
description = defaultValue('string'), description = defaultValue('string'),
email = defaultValue('string') email = defaultValue('string'),
phone = defaultValue('string')
} = form; } = form;
return { return {
position, position,
locale, locale,
description, description,
email email,
phone
}; };
} }
}, },
@ -49,17 +52,25 @@ export default contain({
position: PropTypes.object, position: PropTypes.object,
locale: PropTypes.object, locale: PropTypes.object,
description: PropTypes.object, description: PropTypes.object,
email: PropTypes.object email: PropTypes.object,
phone: PropTypes.object
},
handleChange(name, validator, { target: { value } }) {
const { jobActions: { handleForm } } = this.props;
handleForm({ name, value, validator });
}, },
render() { render() {
const { const {
jobActions,
position, position,
locale, locale,
description, description,
email email,
phone
} = this.props; } = this.props;
const labelClass = 'col-sm-offset-1 col-sm-2';
const inputClass = 'col-sm-6';
return ( return (
<div> <div>
@ -68,67 +79,90 @@ export default contain({
<Well className='text-center'> <Well className='text-center'>
<h1>Create Your Job Post</h1> <h1>Create Your Job Post</h1>
<form className='form-horizontal'> <form className='form-horizontal'>
<Input <Row>
bsStyle={ position.bsStyle } <div className='spacer'>
label='Position' <h2>Job Information</h2>
labelClassName='col-xs-2' </div>
onChange={ ({ target: { value } }) => { <Input
jobActions.handleForm({ bsStyle={ position.bsStyle }
name: 'position', label='Position'
value, labelClassName={ labelClass }
validator: isAscii onChange={ (e) => {
}); this.handleChange(
}} 'position',
placeholder='Position' isAscii,
type='text' e
value={ position.value } );
wrapperClassName='col-xs-10' /> }}
<Input placeholder='Position'
bsStyle={ locale.bsStyle } type='text'
label='Location' value={ position.value }
labelClassName='col-xs-2' wrapperClassName={ inputClass } />
onChange={ ({ target: { value } }) => { <Input
jobActions.handleForm({ bsStyle={ locale.bsStyle }
name: 'locale', label='Location'
value, labelClassName={ labelClass }
validator: isAscii onChange={ (e) => {
}); this.handleChange(
}} 'locale',
placeholder='Location' isAscii,
type='text' e,
value={ locale.value } );
wrapperClassName='col-xs-10' /> }}
<Input placeholder='Location'
bsStyle={ description.bsStyle } type='text'
label='Description' value={ locale.value }
labelClassName='col-xs-2' wrapperClassName={ inputClass } />
onChange={ ({ target: { value } }) => { <Input
jobActions.handleForm({ bsStyle={ description.bsStyle }
name: 'description', label='Description'
value, labelClassName={ labelClass }
validator: isAscii onChange={ (e) => {
}); this.handleChange(
}} 'description',
placeholder='Description' isAscii,
rows='10' e
type='textarea' );
value={ description.value } }}
wrapperClassName='col-xs-10' /> placeholder='Description'
<Input rows='10'
bsStyle={ email.bsStyle } type='textarea'
label='Email' value={ description.value }
labelClassName='col-xs-2' wrapperClassName={ inputClass } />
onChange={ ({ target: { value } }) => { <div className='divider'>
jobActions.handleForm({ <h2>Company Information</h2>
name: 'email', </div>
value, <Input
validator: isEmail bsStyle={ email.bsStyle }
}); label='Email'
}} labelClassName={ labelClass }
placeholder='Email' onChange={ (e) => {
type='email' this.handleChange(
value={ email.value } 'email',
wrapperClassName='col-xs-10' /> isEmail,
e
);
}}
placeholder='Email'
type='email'
value={ email.value }
wrapperClassName={ inputClass } />
<Input
bsStyle={ phone.bsStyle }
label='Phone'
labelClassName={ labelClass }
onChange={ (e) => {
this.handleChange(
'phone',
(data) => isMobilePhone(data, 'en-US'),
e
);
}}
placeholder='555-123-1234'
type='tel'
value={ phone.value }
wrapperClassName={ inputClass } />
</Row>
</form> </form>
</Well> </Well>
</Col> </Col>

1
common/models/job.json
View File

@ -1,6 +1,7 @@
{ {
"name": "job", "name": "job",
"base": "PersistedModel", "base": "PersistedModel",
"strict": true,
"idInjection": true, "idInjection": true,
"trackChanges": false, "trackChanges": false,
"properties": { "properties": {

2
package.json
View File

@ -101,7 +101,7 @@
"thundercats-react": "^0.1.0", "thundercats-react": "^0.1.0",
"twit": "~1.1.20", "twit": "~1.1.20",
"uglify-js": "~2.4.15", "uglify-js": "~2.4.15",
"validator": "~3.22.1", "validator": "^3.22.1",
"webpack": "^1.9.12", "webpack": "^1.9.12",
"yui": "~3.18.1" "yui": "~3.18.1"
}, },