diff --git a/404.html b/404.html index 62fcc66..f310649 100644 --- a/404.html +++ b/404.html @@ -15,7 +15,7 @@
Formulier

Appearance

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
Take me home
- + \ No newline at end of file diff --git a/core/guide/getting-started.html b/core/guide/getting-started.html index f2d1449..dedce75 100644 --- a/core/guide/getting-started.html +++ b/core/guide/getting-started.html @@ -18,7 +18,7 @@
Formulier

Appearance

Getting Started ​

- + \ No newline at end of file diff --git a/hashmap.json b/hashmap.json index 39959f8..de54414 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"react_api_use-form-field-array.md":"uUpkRpLv","react_guide_validation.md":"sa73LLG9","react_guide_getting-started.md":"ZHi-MwbQ","react_api_use-form-selector.md":"jBESUc5J","core_guide_getting-started.md":"RdevKID1","react_api_use-create-form.md":"wzwzFCDc","index.md":"rO7U9SzW","react_api_use-form-field-value.md":"LsW9NQPp","react_api_use-form-field.md":"rK18qMv-","react_api_use-form-instance.md":"gGKyHWbA"} +{"index.md":"rO7U9SzW","react_api_use-form-field-array.md":"uUpkRpLv","react_api_use-form-instance.md":"gGKyHWbA","react_api_use-create-form.md":"wzwzFCDc","react_api_use-form-field-value.md":"LsW9NQPp","react_api_use-form-selector.md":"jBESUc5J","core_guide_getting-started.md":"RdevKID1","react_api_use-form-field.md":"rK18qMv-","react_guide_getting-started.md":"ZHi-MwbQ","react_guide_validation.md":"sa73LLG9"} diff --git a/index.html b/index.html index 154d878..7ef8eb2 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@
Formulier

Appearance

Formulier

Simple, performant form library for React

Get Started
API
View on GitHub
Logo
ðŸ•đïļ

Controlled

Controlled forms let you easily change and modify the form's state.

ðŸŠķ

Lightweight

Provides a small and focussed API while still allowing for complex forms.

🏎ïļ

Fast

Only re-render when needed even though it is fully controlled.

⚙ïļ

Headless

Made to work with hooks so you have full control over your form fields.

- + \ No newline at end of file diff --git a/react/api/use-create-form.html b/react/api/use-create-form.html index 7ab10ab..f474e6f 100644 --- a/react/api/use-create-form.html +++ b/react/api/use-create-form.html @@ -26,7 +26,7 @@ initialValues: {name: 'Jeff'}, }) } - + \ No newline at end of file diff --git a/react/api/use-form-field-array.html b/react/api/use-form-field-array.html index 695c9f4..78f9e64 100644 --- a/react/api/use-form-field-array.html +++ b/react/api/use-form-field-array.html @@ -18,7 +18,7 @@
Formulier

Appearance

useFormFieldArray() ​

- + \ No newline at end of file diff --git a/react/api/use-form-field-value.html b/react/api/use-form-field-value.html index 1693f78..5c70ee2 100644 --- a/react/api/use-form-field-value.html +++ b/react/api/use-form-field-value.html @@ -33,7 +33,7 @@ }) const name = useFormFieldValue('name') } - + \ No newline at end of file diff --git a/react/api/use-form-field.html b/react/api/use-form-field.html index 16804e7..79c3855 100644 --- a/react/api/use-form-field.html +++ b/react/api/use-form-field.html @@ -31,7 +31,7 @@ </> ) } - + \ No newline at end of file diff --git a/react/api/use-form-instance.html b/react/api/use-form-instance.html index 0c65587..29e800b 100644 --- a/react/api/use-form-instance.html +++ b/react/api/use-form-instance.html @@ -34,7 +34,7 @@ function SubComponent({name, label}) { const form = useFormInstance() } - + \ No newline at end of file diff --git a/react/api/use-form-selector.html b/react/api/use-form-selector.html index 70e9cc7..72ec236 100644 --- a/react/api/use-form-selector.html +++ b/react/api/use-form-selector.html @@ -18,7 +18,7 @@
Formulier

Appearance

useFormSelector() ​

- + \ No newline at end of file diff --git a/react/guide/getting-started.html b/react/guide/getting-started.html index ce0ff95..fdb833d 100644 --- a/react/guide/getting-started.html +++ b/react/guide/getting-started.html @@ -66,7 +66,7 @@ </div> ) }
Try it out

Quick Explanation ​

The first thing we need to set up a form is the useCreateForm hook. This hook creates a form store with initial values for its form fields. This form store contains all the form's data and usefull methods to set values and more.

Then we render the Form component provided by @formulier/react and pass it the form store and a submit handler that's called with the form values when the user submits the form.

The last piece to the puzzle is the useFormField hook. We pass this hook the form store, a name and an optional validator function. useFormField provides us with everything we need to render the input elements for our form.

- + \ No newline at end of file diff --git a/react/guide/validation.html b/react/guide/validation.html index 263e732..ad74fdc 100644 --- a/react/guide/validation.html +++ b/react/guide/validation.html @@ -147,7 +147,7 @@ </div> ) }

Example: Results ​

Below you can see the result of our changes.

Validation Timing ​

validation functions are called:

Example ​

Imagine the user focuses the firstName field and tabs to the lastName field. The firstName field will now show the "Value is required!" error. If the user then goes back to firstName and types one character, the validation function is run again and now the error will be "Value should be at least 2 characters long!". Adding 2 more characters will make the error disappear.

Validation Order ​

It's important to note that a field can only have one error at a time. Therefore whichever error string is returned by our validate function is the one that's available from meta.error.

In our example above it makes sense to validate required before minLength so if we leave the field empty, we will see the required error instead of the min length one.

- + \ No newline at end of file