react-form-fields

0.1.9 • Public • Published

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)]><!--><html><!--<![endif]-->

Usage

Text input

var FormFields = require('react-form-fields');
ReactDOM.render(
    <FormFields
        tag="input" 
        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')
);

Checkbox input

var FormFields = require('react-form-fields');
ReactDOM.render(
    <FormFields
        tag="input" 
        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')
);

Radios

var FormFields = require('react-form-fields');
ReactDOM.render(
    <FormFields
        tag="input" 
        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')
);

Select

var FormFields = require('react-form-fields');
ReactDOM.render(
    <FormFields
        tag="select" 
        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')
);

Textarea

var FormFields = require('react-form-fields');
ReactDOM.render(
    <FormFields
        tag="textarea" 
        attributes={{
            placeholder: 'Alpha numeric text input',
            name: 'my-input',
            id: 'my-input'
        }}
    />,
    document.getElementById('react-form-field')
);

Form validation example

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 (
            <form onSubmit={this.validate}>
                <FormFields
                    ref="react-form-field-1" 
                    tag="input" 
                    validation="email" 
                    errorMsg="Please enter a valid email address" 
                    required={true} 
                    attributes={{
                        type: 'text',
                        placeholder: 'Your email',
                        name: 'email',
                        id: 'email'
                    }}
                />
                <button type="submit">Submit</button>
            </form>
        );
    }
 
});
 
ReactDOM.render(
    <Form />,
    document.getElementById('react-form-field')
);

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

Package Sidebar

Install

npm i react-form-fields

Weekly Downloads

2

Version

0.1.9

License

none

Last publish

Collaborators

  • simonstaton