React-form-fields NPM

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