Form fields packaged into a react class, supports validation, url parameter autofill, relationships and HTML5 polyfill for placeholders
npm install react-form-fieldsForm fields packaged into a react class, supports validation, url parameter autofill, relationships and HTML5 polyfill for placeholders
``
npm install react-form-fields
For HTML5 placeholder polyfill versioning is defined in the DOM using conditional comments, to support html`
javascript
var FormFields = require('react-form-fields');
ReactDOM.render(
validation="alphanumeric"
errorMsg="This field is required and only accepts alpha numeric characters"
required={true}
attributes={{
type: 'text',
placeholder: 'Alpha numeric text input',
name: 'my-input',
id: 'my-input'
}}
/>,
document.getElementById('react-form-field')
);
`$3
javascript
var FormFields = require('react-form-fields');
ReactDOM.render(
errorMsg="This field is required"
required={true}
attributes={{
type: 'checkbox',
name: 'my-input',
id: 'my-input',
value: 'agreed to terms'
}}
/>,
document.getElementById('react-form-field')
);
`$3
javascript
var FormFields = require('react-form-fields');
ReactDOM.render(
attributes={{
type: 'radio',
name: 'my-input',
id: 'my-input'
}}
options={[
{
value: 'option-1',
label: 'Option 1'
},
{
value: 'option-2',
label: 'Option 2'
}
]}
legend="My Radios"
/>,
document.getElementById('react-form-field')
);
`$3
javascript
var FormFields = require('react-form-fields');
ReactDOM.render(
attributes={{
placeholder: 'Please select an option',
name: 'my-input',
id: 'my-input'
}}
options={[
{
value: 'option-1',
label: 'Option 1'
},
{
value: 'option-2',
label: 'Option 2'
}
]}
/>,
document.getElementById('react-form-field')
);
`$3
javascript
var FormFields = require('react-form-fields');
ReactDOM.render(
attributes={{
placeholder: 'Alpha numeric text input',
name: 'my-input',
id: 'my-input'
}}
/>,
document.getElementById('react-form-field')
);
`$3
javascript
var FormFields = require('react-form-fields');
var Form = React.createClass({ // .....
validate: function(e){
e.preventDefault();
var self = this,
valid = true,
inputs = Object.keys(this.refs).filter(function(key) {
return key.indexOf('react-form-field-') == 0;
}).reduce(function(data, key) {
data[key] = self.refs[key];
return data;
}, {});
for(var key in inputs) {
if(!inputs[key].validate()) {
valid = false;
}
}
if(!valid) {
e.preventDefault();
} else {
// its valid
}
},
render: function(){
return (
);
}});
ReactDOM.render(
,
document.getElementById('react-form-field')
);
`Options
#### tag
Type:
Default:
Options:
, select, textareaDetermines the type of form field, if using input specify the attribute type as text, radio or checkbox
#### errorMsg
Type:
Default:
The error message that is appended after the input if it is required and empty or if validation fails
#### required
Type:
Default:
If this field is required, will fail validation if empty
#### validation
Type:
Options:
, regexp string, email, numeric, alpha, alphanumericField validation, accepts regexp or a predefined option
#### options
Type:
Example:
options={[
{
value: 'option-1',
label: 'option 1'
},
{
value: 'option-2',
label: 'option 2'
}
]}
An array of options for use with radio or select field tags
#### parameter
Type:
Auto populate field based on a url parameter, example 'email' would auto populate field if url contains the email parameter http://localhost:4000/?email=me@simonstaton.co.uk
#### relationship
Type:
Accepts another form elements id and will fail validation if the input value does not match, used for confirmational email/phone number fields
#### onChange
Type:
A callback function for change events, callback contains event object
#### onBlur
Type:
A callback function for blur events, callback contains event object
#### onFocus
Type:
A callback function for focus events, callback contains event object
#### onValidate
Type:
A callback function to be fired when field is validated, callback contains valid boolean
#### legend
Type:
For use with radio fields, if specified will add a fieldset legend
#### attributes
Type:
Assigns attributes directly to the form field
##### attributes.type
Type:
Default:
The type of input, to be used with the field tag of input to define a text or checkbox input
##### attributes.placeholder
Type:
The placeholder
##### attributes.name
Type:
Default:
The field name
##### attributes.id
Type:
Default:
The field id
##### attributes.className
Type:
Class assigned to the field
##### attributes.autoComplete
Type:
Options:
Will disable default browser auto complete on load, clears field
##### attributes.value
Type:
Prepopulate field value, will fire change events and validate if prop changes
MIT © Simon Staton