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.