Input - Revision history

Luke: /* Validation */

2021-11-09T15:38:59Z

Validation

← Older revision		Revision as of 15:38, 9 November 2021
Line 51:		Line 51:
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
	export default value => {		export default value => {

	if(!value \|\| (value.trim && value.trim() == '')){		if(!value \|\| (value.trim && value.trim() == '')){
	return {		return {

Luke: /* Validation */

2021-11-09T15:38:47Z

Validation

← Older revision		Revision as of 15:38, 9 November 2021
Line 60:		Line 60:
	};		};
	}		}
			}
	</syntaxhighlight>		</syntaxhighlight>

Luke: /* Props */

2021-11-09T15:20:11Z

Props

← Older revision		Revision as of 15:20, 9 November 2021
Line 20:		Line 20:
	=Props=		=Props=

	This is the main available props for the <~~Form~~> react component.		This is the main available props for the <Input> react component.

			(todo!)

	{\| class="wikitable"		{\| class="wikitable"

Luke at 15:19, 9 November 2021

2021-11-09T15:19:07Z

← Older revision		Revision as of 15:19, 9 November 2021
Line 1:		Line 1:
	<Input> is a [https://reactjs.org/docs/react-component.html React component] which is primarily a convenience wrapper for <input>. Using it is not required for [[Form]] - you can mix and match regular <input> fields inside a form and they will still be submitted.		<Input> is a [https://reactjs.org/docs/react-component.html React component] which is primarily a convenience wrapper for <input>. Using it is not required for [[Forms\|<Form>]] - you can mix and match regular <input> fields inside a form and they will still be submitted.

	=Form example=		=Form example=

Luke at 15:18, 9 November 2021

2021-11-09T15:18:50Z

← Older revision		Revision as of 15:18, 9 November 2021
Line 1:		Line 1:
	<Input> is a [https://reactjs.org/docs/react-component.html React component] which is primarily a convenience wrapper for <input>. Using it is not required for <Form> - you can mix and match regular <input> fields inside a form and they will still be submitted.		<Input> is a [https://reactjs.org/docs/react-component.html React component] which is primarily a convenience wrapper for <input>. Using it is not required for [[Form]] - you can mix and match regular <input> fields inside a form and they will still be submitted.

	=Form example=		=Form example=

Luke at 15:17, 9 November 2021

2021-11-09T15:17:34Z

← Older revision		Revision as of 15:17, 9 November 2021
Line 17:		Line 17:
	</syntaxhighlight>		</syntaxhighlight>

	~~= Props =~~

	=Props=		=Props=
Line 34:		Line 33:
	\| No		\| No
	\| none		\| none
	}		\|}

	=Validation=		=Validation=

Luke: Created page with " is a [https://reactjs.org/docs/react-component.html React component] which is primarily a convenience wrapper for . Using it is not required for
- you ca..."

2021-11-09T15:13:32Z

Created page with "<Input> is a [https://reactjs.org/docs/react-component.html React component] which is primarily a convenience wrapper for <input>. Using it is not required for <Form> - you ca..."

New page

<Input> is a [https://reactjs.org/docs/react-component.html React component] which is primarily a convenience wrapper for <input>. Using it is not required for <Form> - you can mix and match regular <input> fields inside a form and they will still be submitted.

=Form example=

<syntaxhighlight lang="dart" line="1">

import Form from 'UI/Form';
import Input from 'UI/Input';

...

<Form action="user" submitLabel="Create a user" successMessage="User created!" failureMessage="Unable to create a user now">
<Input type="text" name="email" label="Email Address" validate={["Required"]} />
<Input type="password" name="password" label="Email Address" />
</Form>

</syntaxhighlight>

= Props =

=Props=

This is the main available props for the <Form> react component.

{| class="wikitable"
|-
! Name
! About
! Required?
! Default value
|-
| validate
| It's an array of validators. See the section about validation below.
| No
| none
}

=Validation=

The validate prop can be used to provide an array of validators. Each one is either a string or a function. If you provide a string, it will be treated as the name of a module under UI/Functions/Validation. Let's take the example above:

<syntaxhighlight lang="dart" line="1">
<Input type="text" name="email" label="Email Address" validate={["Required"]} />
</syntaxhighlight>

This string validator, "Required", will be a function imported from UI/Functions/Validation/Required.

The validator functions themselves are relatively simple - they are given the input fields value as their input, and do nothing if the input was valid. Otherwise, they return an error with a visual version as well as a textual error code. Here is the source of Required itself:

<syntaxhighlight lang="javascript">
export default value => {

if(!value || (value.trim && value.trim() == '')){
return {
error: 'EMPTY',
ui: <Text>
{`This field is required`}
</Text>
};
}
</syntaxhighlight>

Input - Revision history

Luke: /* Validation */

Luke: /* Validation */

Luke: /* Props */

Luke at 15:19, 9 November 2021

Luke at 15:18, 9 November 2021

Luke at 15:17, 9 November 2021

Luke: Created page with " is a [https://reactjs.org/docs/react-component.html React component] which is primarily a convenience wrapper for . Using it is not required for - you ca..."

Luke: Created page with " is a [https://reactjs.org/docs/react-component.html React component] which is primarily a convenience wrapper for . Using it is not required for
- you ca..."