React Form Fields
Form 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 <IE9 include these in your html:
<!--[if lt IE 7 ]> <html class="ie ie6"> <![endif]--><!--[if IE 7 ]> <html class="ie ie7"> <![endif]--><!--[if IE 8 ]> <html class="ie ie8"> <![endif]--><!--[if IE 9 ]> <html class="ie ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--><!--<![endif]-->
Usage
Text input
var FormFields = ;ReactDOM;
Checkbox input
var FormFields = ;ReactDOM;
Radios
var FormFields = ;ReactDOM;
Select
var FormFields = ;ReactDOM;
Textarea
var FormFields = ;ReactDOM;
Form validation example
var FormFields = ;var Form = React; ReactDOM;
Options
tag
Type: string
Default: input
Options: input
, select
, textarea
Determines the type of form field, if using input specify the attribute type as text, radio or checkbox
errorMsg
Type: string
Default: This field is invalid
The error message that is appended after the input if it is required and empty or if validation fails
required
Type: boolean
Default: false
If this field is required, will fail validation if empty
validation
Type: regexp | string
Options: regexp object
, regexp string
, email
, numeric
, alpha
, alphanumeric
Field validation, accepts regexp or a predefined option
options
Type: array
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: string
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: string
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: function
A callback function for change events, callback contains event object
onBlur
Type: function
A callback function for blur events, callback contains event object
onFocus
Type: function
A callback function for focus events, callback contains event object
onValidate
Type: function
A callback function to be fired when field is validated, callback contains valid boolean
legend
Type: string
For use with radio fields, if specified will add a fieldset legend
attributes
Type: object
Assigns attributes directly to the form field
attributes.type
Type: string
Default: text
The type of input, to be used with the field tag of input to define a text or checkbox input
attributes.placeholder
Type: string
The placeholder
attributes.name
Type: string
Default: react-form-field
The field name
attributes.id
Type: string
Default: react-form-field
The field id
attributes.className
Type: string
Class assigned to the field
attributes.autoComplete
Type: string
Options: off
Will disable default browser auto complete on load, clears field
attributes.value
Type: string
Prepopulate field value, will fire change events and validate if prop changes
License
MIT © Simon Staton