Interface FormInstance

Get the default language being used.

Example

import { useFormInputValidation } from "react-form-input-validation";

const [fields, errors, form] = useFormInputValidation({ customer_name: "" });
form.getDefaultLang(); // returns e.g. 'en'

Get the raw object of messages for the given language.

Example

import { Lang, useFormInputValidation } from "react-form-input-validation";

const [fields, errors, form] = useFormInputValidation({ customer_name: "" });
const messages = form.getMessages(Lang.en); (i.e) 'en'
console.log(messages);

See

Example in Code Sandbox.

A method to handle the onblur event for input in the form.

Example

import { useFormInputValidation } from "react-form-input-validation";

const [fields, errors, form] = useFormInputValidation({ email: "" });

<input
     type="text"
     name="email"
     value={fields.email}
     onChange={form.handleChangeEvent}
     onBlur={form.handleBlurEvent}
>

Handle onchange event for input fields.

Example

import { useFormInputValidation } from "react-form-input-validation";

const [fields, errors, form] = useFormInputValidation({ email: "" });

<input
     type="text"
     name="email"
     onChange={form.handleChangeEvent}
     value={fields.email}
>

A method to handle the react form submission.

Example

import { useFormInputValidation } from "react-form-input-validation";

const [fields, errors, form] = useFormInputValidation({ email: "", password: "" });

<form onSubmit={form.handleSubmit}>
</form>

Register Custom Validation Rules.

Example

import { useFormInputValidation } from "react-form-input-validation";

const [fields, errors, form] = useFormInputValidation({ phone: "required|telephone" });
form.register('telephone', function(value, requirement, attribute) {
     return value.match(/^\d{3}-\d{3}-\d{4}$/);
}, 'The :attribute phone number is not in the format XXX-XXX-XXXX.');

See

Example in Code Sandbox

Register an asynchronous rule which accepts a passes callback. The data-async custom attribute should be added in the html element.

Example

import { useFormInputValidation } from "react-form-input-validation";

const [fields, errors, form] = useFormInputValidation({ customer_name: "" }, { customer_name: "required|username_available" });

form.registerAsync('username_available', function(username, attribute, req, passes) {
     // do your database/api checks here etc
     // then call the `passes` method where appropriate:
     passes(); // if username is available
     passes(false, 'Username has already been taken.'); // if username is not available
});

<input
     type="text"
     name="customer_name"
     onChange={form.handleChangeEvent}
     onBlur={form.handleBlurEvent}
     value={fields.customer_name}
     data-async
>

See

Example in Code Sandbox.

You can supply global custom attribute names in your app with the attributes property.

Example

import { useFormInputValidation } from "react-form-input-validation";

const [fields, errors, form] = useFormInputValidation({ customer_name: "" });
form.setAttributeFormatter(function(attribute) {
     return attribute.replace(/_/g, ' ');
});

See

Example in Code Sandbox.

You can also add your own custom language by calling setMessages.

Example

import { Lang, useFormInputValidation } from "react-form-input-validation";

const [fields, errors, form] = useFormInputValidation({ customer_name: "" }, { customer_name: "required" });

form.setMessages(Lang.en, {
 required: 'The :attribute can't be empty.'
});

See

Example in Code Sandbox.

Set the locale string for error messages.

Example

import { Lang, useFormInputValidation } from "react-form-input-validation";

const [fields, errors, form] = useFormInputValidation({ name: "" });
form.useLang(Lang.en);

Set the validation rules for form fields. Find the available rules here.

Example

import { useFormInputValidation } from "react-form-input-validation";

const [fields, errors, form] = useFormInputValidation({ email: "", password: "" });
form.useRules({
     email: "required|email",
     password: "required"
});

The validate method is used to trigger the validator manually. It returns a promise function, it will resolve with boolean value. If the form doesn't have any errors it will resolve with true.

Example

import { useFormInputValidation } from "react-form-input-validation";

const [fields, errors, form] = useFormInputValidation({ email: "", password: "" });

const onSubmit = async (event) => {
  const isValid = await form.validate(event);
  if (isValid) {
     console.log(fields, errors);
     // Perform the api call here
  }
}

<form onSubmit={onSubmit}>
</form>

See

Example in Code Sandbox.