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

110
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'>
<Row>
<div className='spacer'>
<h2>Job Information</h2>
</div>
<Input <Input
bsStyle={ position.bsStyle } bsStyle={ position.bsStyle }
label='Position' label='Position'
labelClassName='col-xs-2' labelClassName={ labelClass }
onChange={ ({ target: { value } }) => { onChange={ (e) => {
jobActions.handleForm({ this.handleChange(
name: 'position', 'position',
value, isAscii,
validator: isAscii e
}); );
}} }}
placeholder='Position' placeholder='Position'
type='text' type='text'
value={ position.value } value={ position.value }
wrapperClassName='col-xs-10' /> wrapperClassName={ inputClass } />
<Input <Input
bsStyle={ locale.bsStyle } bsStyle={ locale.bsStyle }
label='Location' label='Location'
labelClassName='col-xs-2' labelClassName={ labelClass }
onChange={ ({ target: { value } }) => { onChange={ (e) => {
jobActions.handleForm({ this.handleChange(
name: 'locale', 'locale',
value, isAscii,
validator: isAscii e,
}); );
}} }}
placeholder='Location' placeholder='Location'
type='text' type='text'
value={ locale.value } value={ locale.value }
wrapperClassName='col-xs-10' /> wrapperClassName={ inputClass } />
<Input <Input
bsStyle={ description.bsStyle } bsStyle={ description.bsStyle }
label='Description' label='Description'
labelClassName='col-xs-2' labelClassName={ labelClass }
onChange={ ({ target: { value } }) => { onChange={ (e) => {
jobActions.handleForm({ this.handleChange(
name: 'description', 'description',
value, isAscii,
validator: isAscii e
}); );
}} }}
placeholder='Description' placeholder='Description'
rows='10' rows='10'
type='textarea' type='textarea'
value={ description.value } value={ description.value }
wrapperClassName='col-xs-10' /> wrapperClassName={ inputClass } />
<div className='divider'>
<h2>Company Information</h2>
</div>
<Input <Input
bsStyle={ email.bsStyle } bsStyle={ email.bsStyle }
label='Email' label='Email'
labelClassName='col-xs-2' labelClassName={ labelClass }
onChange={ ({ target: { value } }) => { onChange={ (e) => {
jobActions.handleForm({ this.handleChange(
name: 'email', 'email',
value, isEmail,
validator: isEmail e
}); );
}} }}
placeholder='Email' placeholder='Email'
type='email' type='email'
value={ email.value } value={ email.value }
wrapperClassName='col-xs-10' /> 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"
}, },