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

1
common/models/job.json
View File

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

2
package.json
View File

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