pronto-validated-form
v0.1.16
Published
Helpers for creating a form with validated fields.
Downloads
4
Readme
validated-form
Helpers for creating a form with validated fields.
ValidatedForm
Properties
fields
An object of field names and options{name: options, ...}
. See field options for more informationvalues
An object of field values{name: value, ...}
onSubmit(values)
A function to be called when the form is submitted (only if fields are valid)
Example
<ValidatedForm ref='form' fields={
city: {}
state: {placeholder: 'e.g. "NY" or "MA"'}
county: {optional: true}
} onSubmit={({city, state, county}) -> alert(city + ' is in ' + state) } />
ValidatedField
Properties
name
Name of this fieldtype
One of "text", "number", "email", or "toggle", default is "text"placeholder
A placeholder, default is the un-slugified field nameerror_message
Message to show if field is invalidhidden
A boolean or function to determine if this field is hiddenoptional
A boolean or function to determine if this field is optional
ValidatedFormMixin
The ValidatedFormMixin
provides methods for rendering fields, keeping track of fields state, and checking that fields are valid.
Class attributes
getInitialState() -> {values}
required- A component that uses this mixin must define a
getInitialState
that returns at least an emptyvalues: {}
, because a React component does not have state by default - You can also use this to pre-fill values of fields, with e.g.
values: {email: '[email protected]'}
- A component that uses this mixin must define a
getDefaultProps() -> {fields, onSubmit}
- Define fields and other props here, or pass them in as props instead
onSubmit(values)
- A function to be called when the form is submitted (only if fields are valid)
- Can be defined directly on your class instead of as a property
Properties
fields
An object of field names and options in the shape{name: options, ...}
. See field options for more informationonSubmit(values)
A function to be called when the form is submitted (only if fields are valid)
State
values
An object of values by field name
Methods from mixin
renderField(name)
Render an individual field with the options infields[name]
trySubmit()
A method that looks through fieldsclear()
Sets all field values to null
Example
{ValidatedFormMixin} = require 'validated-form'
FormTest = React.createClass
mixins: [ValidatedFormMixin]
getInitialState: ->
values:
name: 'test'
getDefaultProps: ->
fields:
name: {type: 'text'}
age: {type: 'number'}
email: {type: 'email'}
onSubmit: (values) ->
@setState {loading: true}
submitFormAnd =>
@clear()
@setState {loading: false}
render: ->
<div>
<form onSubmit=@trySubmit>
{@renderField 'name'}
{@renderField 'age'}
{@renderField 'email'}
<button>{if @state.loading then "Loading..." else "Submit"}</button>
</form>
</div>