@surinderlohat/lohat-react-form-validation NPM

Lohat React Form validation

Form validation solution for react JS, super easy to use and can handel all the major user cases.

Based on the React hooks and reactive programing.

No extra dependencies pure react js code & lightweight.

Features

Easy validations solution for react js.
Regex validations.
Custom validations.
Email validations.
Many useful form helping methods i.e hasError, hasChanges, isTouched, getValues, getErrors.
Easy to configure.
Support complex user cases.
Nested form fields validations.
Dynamic add/remove fields.
Open source Free to use.

Installation

npm install @surinderlohat/lohat-react-form-validation
or
yarn add @surinderlohat/lohat-react-form-validation

API Documentation

https://surinderlohat.github.io/lohat-react-form-validation/

Form Helping Methods

Note: all methods are available like: form.onSubmit()

Method	PARAMS	DESCRIPTION
resetToDefault	No	Reset form state to default All fields will be reset to the default state
getField	fieldKey i.e name or user.name if nested field	Return the specific field instance
getChangedFields	No	Return fields with initial value and changed value
clearForm	No	Clear form values and all nested child's
onSubmit	No	Return from values and error state

Form Getters

Name	RETURN Type	RETURN VALUE
getValues	object	Return form values in same order we have pass
getErrors	object	Display all errors for each nested field
hasChanges	boolean	Return true if any field has changes

Field Methods

Method	TYPE	RETURN VALUE
hasChanges	Getter	Return field state i.e it's changed or not
hasError	Getter	Return error state of the specific field
errorMessage	Getter	Return error message for current field from
setValue	Function	Set value of specific field
getValue	Function	Get value of specific field
setRules	(newRules: Rules)	Update field rules on the fly
setError	Function	Set custom error message on specific field
customValidation	(field: IFieldProps, form: LohatForm)	return error message with from custom logic Click Me

Rules

More will added soon

 min?: number; // min value
 max?: number; // max value
 required?: boolean; // make field required
 regExp?: RegExp; // pass any custom regex validation
 isEmail?: boolean; // validate email address
 same?: string; // provide key to match value

How to use

import { FieldObject, useLohatForm } from '@surinderlohat/lohat-react-form-validation';
const fields: FieldObject = {
  firstName: {
    label: 'First Name',
    value: 'Surinder',
    rules: {
      required: true,
      min: 2,
      max: 10,
    },
  },
 lastName: {
    label: 'Last Name',
    value: 'Singh',
    rules: {
      required: true,
      min: 2,
      max: 10,
    },
  },
  email: {
    label: 'Email',
    value: 'test@domain.com',
    rules: {
      isEmail: true,
      min: 2,
      max: 10,
    },
  },
};

function FormValidation() {
  const form = useLohatForm(fields);
  return (
    <div className="App">
      <form>
        <FormField field={form.getField('firstName')} />
        <FormField field={form.getField('lastName')} />
        <FormField field={form.getField('email')} />
        <Button onClick={()=>form.getValues()}>
        Save Changes
        </Button>
      </form>
    </div>
  );
}

function FormField({ field }: Props) {
  return (
    <TextField
      {...field.bind()} // find input methods to input i.e onChange, onBlur, onFocus
      label={field.starLabel}
      error={field.hasError}
      helperText={field.errorMessage}
      variant="filled"
    />
  );
}