React Simpler Forms Demo v1.0.2

Form type
Button

Example Form

Type something and see the form state change.
psst jdanmello@gmail.com is not available
What's your favorite color
Password must contain at least 8 characters and 1 number.
Submit Example Form

Form state

Managed by the HOC SimplerForm
step:
0
,
error:
false
,
response:
null
,
loading:
false
,
Data: {
name : {
step :
0
,
error :
null
,
property :
name
,
focused :
false
,
value :
null
,
validators: [
{
"method":
notEmpty
,
"error":
"Name cannot be empty."
},
{
"method":
onlyLetters
,
"error":
"Name can only contain letters."
},
{
"method":
maxCharaters
,
"error":
"Name can only contain 35 characters."
},
],
},
email : {
step :
0
,
error :
null
,
property :
email
,
focused :
false
,
value :
null
,
validators: [
{
"method":
notEmpty
,
"error":
"Email cannot be empty."
},
{
"method":
validEmail
,
"error":
"Please enter a valid email."
},
],
typingDelay :
null
,
typing :
false
,
query :
true
,
queryVerified :
false
,
queryResponse :
null
,
queryDelay :
null
,
},
state : {
step :
0
,
error :
false
,
property :
state
,
focused :
false
,
value :
null
,
required :
true
,
},
favorite_color : {
step :
0
,
error :
false
,
property :
favorite_color
,
focused :
false
,
value :
null
,
required :
true
,
checked :
false
,
},
password : {
step :
0
,
error :
null
,
property :
password
,
focused :
false
,
value :
null
,
validators: [
{
"method":
notEmpty
,
"error":
"Password cannot be empty."
},
{
"method":
validPassword
,
"error":
"Password must contain at least 8 character and 1 number."
},
],
typingDelay :
null
,
typing :
false
,
match :
password
,
},
passwordRepeat : {
step :
0
,
error :
null
,
property :
passwordRepeat
,
focused :
false
,
value :
null
,
validators: [
{
"method":
notEmpty
,
"error":
"Password cannot be empty."
},
{
"method":
validPassword
,
"error":
"Password must contain at least 8 character and 1 number."
},
],
typingDelay :
null
,
typing :
false
,
match :
password
,
},
question : {
step :
0
,
error :
false
,
property :
question
,
focused :
false
,
values: [
{
"value":
"I agree that react-simpler-forms is cool."
,
"checked":
false
,
},
],
},
}