Foect 
Simple form validation library for React Native.
Installing
Npm
npm i --save foect
Yarn
yarn add foect
Quick Start
import { TextInput, Text, View, Button } from 'react-native';
import Foect from 'foect';
// ...
<Foect.Form
defaultValue={{
email: '[email protected]'
}}
onValidSubmit={model => {
console.log(model); // { fullName: 'John Doe', email: '[email protected]' ... }
}}
>
{ /* you can use form for triggering submit or checking form state(form.isSubmitted, form.isValid, ...) */ }
{ form => (
<View>
{ /* every Foect.Control must have a name and optionally validation rules */ }
<Foect.Control name="fullName" required minLength={2} maxLength={32}>
{ /* you can use control for getting/setting it's value, checking/updating(control.isValid, control.markAsTouched(), ...) it's state, checking it's errors(control.errors.required) */ }
{ control => (
<View>
<Text>Full Name</Text>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
{ /* mark control as touched on blur */ }
onBlur={control.markAsTouched}
{ /* update control's value */ }
onChangeText={(text) => control.onChange(text)}
{ /* get control's value */ }
value={control.value}
/>
{ /* check control state and show error if necessary */ }
{ control.isTouched &&
control.isInvalid &&
<Text style={{ color: 'red' }}>Please enter your name.</Text> }
</View>
) }
</Foect.Control>
<Foect.Control name="password" required pattern={/(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/}>
{ control => (
<View>
<Text>Password</Text>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
secureTextEntry={true}
onBlur={control.markAsTouched}
onChangeText={(text) => control.onChange(text)}
value={control.value}
/>
{ control.isTouched &&
control.isInvalid &&
<View>
{ control.errors.pattern ?
<Text style={{ color: 'red' }}>Please provide a strong password.</Text> :
<Text style={{ color: 'red' }}>Please enter your password.</Text> }
</View> }
</View>
) }
</Foect.Control>
<Foect.Control name="email" required email>
{ control => (
<View>
<Text>Email</Text>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
keyboardType="email-address"
onBlur={control.markAsTouched}
onChangeText={(text) => control.onChange(text)}
value={control.value}
/>
{ control.isTouched &&
control.isInvalid &&
<View>
<Text>{control.value} is not a valid email.</Text>
</View> }
</View>
) }
</Foect.Control>
{ /* submit form */ }
<Button disabled={form.isInvalid} onPress={() => form.submit()} title="Register" />
</View>
) }
</Foect.Form>
Documentation
Types
type Status = 'INIT' | 'VALID' | 'INVALID';
type Model = { [key: string]: any };
// { firstName: 'John', lastName: 'Doe' }
type Errors = { [key: string]: boolean };
// { required: true, email: true }
type FormErrors = { [name: string]: Errors };
// { firstName: { required: true, minLength: true } }
type Validator = (value: any, config?: any, control?: Control) => ValidatorResult;
type ValidatorResult = null | Errors;
Props
Form
children: (form: Form) => Elementchild renderer function.defaultValue?: Modeldefault values for form.onChange?: (model: Model) => voidcallback called on value change.onValidSubmit?: (model: Model) => voidcallback called on valid submit.onInvalidSubmit?: (errors: FormErrors, model: Model) => voidcallback called on invalid submit.
Control
children: (control: Control) => Elementchild renderer function.name: stringcontrol name.[validator: string]: any;validation rules for control.
APIs
Form
-
status: Statusform status. -
errors: FormErrorsform errors. -
isValid: booleanis form valid. -
isInvalid: booleanis form invalid. -
isSubmitted: booleanis form submitted. -
addControl(name: string, control: Control): voidadds a new control to form. -
removeControl(name: string): voidremoves a control from form. -
getValue(name: string): anyreturns value of a control. -
setValue(name: string, value: any): voidsets value for a control. -
getErrors(name: string): Statusreturns errors of a control. -
setErrors(name: string, errors: Errors): voidsets errors for a control. -
validateControl(name: string): voidvalidates a control and updates control state, errors. -
getStatus(name: string): Statusreturns status of a control. -
update(): voidforce updates form and all child controls. -
submit(): voidsubmits the form. callsonInvalidSubmitoronValidSubmitcallback if provided.
Control
-
value: anycontrol value. -
form: Formcontrol's form. -
status: Statuscontrol status. -
errors: Errorscontrol errors. -
isValid: booleanis control valid. -
isInvalid: booleanis control invalid. -
isTouched: booleanis control touched. -
isUntouched: booleanis control untouched. -
onChange(value: any): voidupdates control's value. -
markAsTouched(): voidmarks control as touched. -
markAsUntouched(): voidmarks control as untouched. -
runValidation(value: any): Errorsruns validation with a value and returns errors.
Validators
Default validators
| Validator | Options |
|---|---|
| required | - |
| minLength | length: number |
| maxLength | length: number |
| pattern | pattern: RegExp |
| - | |
| equalToControl | controlName: string |
| callback | (value: any, control: Control) => boolean |
Options are passed via props
<Foect.Control
name="password2"
myValidator={{foo: 'bar'}}
>
with this definition, myValidator called with ('value of the input', {foo: 'bar'}, controlRef)
You can add your own validators via Foect.Validators.add. Validators must return null on valid value and object with errors on invalid value. For example:
Foect.Validators.add('equalToControl', (val: any, controlName: string, control: Control) => {
if (null === val) {
return null;
}
return val === control.form.getValue(controlName) ? null : { equalToControl: true };
})
Foect.Validators.add(validatorName: string, fn: Validator): voidadds a new validator.Foect.Validators.get(validatorName: string): Validatorreturns a validator.Foect.Validators.has(validatorName: string): booleanreturns whether a validator exists.Foect.Validators.delete(validatorName: string): voiddeletes a validator.
Inspired by Angular Forms.
![[WIP] Mark `componentWillMount`s as unsafe](https://avatars.githubusercontent.com/u/16212576?v=4)
13 Dec 9, 2021
32.6k Jan 8, 2023
145 Nov 11, 2022
6 Dec 29, 2021
1.4k Dec 19, 2022
475 Oct 30, 2022
87 Jul 10, 2022
3.2k Dec 17, 2022
375 Dec 7, 2022
31.7k Dec 31, 2022
290 Nov 26, 2022
7 Dec 16, 2021
0 Dec 29, 2021
108 Dec 17, 2022
4 Mar 17, 2022
1 Feb 10, 2022
5 Aug 28, 2022
38 Nov 11, 2022
266 Jan 3, 2023
281 Nov 11, 2022