Abstract A required parameter to pass the current context of the IReactComponent.
Optional options: IOptionsA optional parameter to set initial validator locale.
Event registered to notify the form submission in ReactFormInputValidation. After successfull validation it will emit the valid data.
A callback function ReactFormSubmitEventHandler.
// Refer "ReactFormInputValidation Interface" for react form input validator object creation
this.form.addEventListener("formsubmit", (fields) => {
// Make your ajax calls here.
});
// or
this.form.onformsubmit = (fields) => {
// Make your ajax calls here.
}
Example in Code Sandbox.
Name of the event.
Event listener for the corresponding event
Rest ...args: any[]A method to handle the onblur event for input in the form.
// Refer "ReactFormInputValidation Interface" for react form input validator object creation
<input
type="text"
name="email"
value={this.state.fields.email}
onChange={this.form.handleChangeEvent}
onBlur={this.form.handleBlurEvent}
>
Handle onchange event for input fields.
// Refer "ReactFormInputValidation Interface" for react form input validator object creation
<input
type="text"
name="email"
onChange={this.form.handleChangeEvent}
value={this.state.fields.email}
>
Name of the event to unsubscribe.
Exact event listener needs to be passed which is used to subscribe.
Rest ...args: any[]Set the validation rules for form fields. Find the available rules here.
this.form.useRules({
email: "required|email",
password: "required"
});
The rules to validate.
Static getGet the default language being used.
ReactFormInputValidation.getDefaultLang(); // returns e.g. 'en'
Example in Code Sandbox.
Static getGet the raw object of messages for the given language.
import ReactFormInputValidation, { Lang } from "react-form-input-validation";
ReactFormInputValidation.getMessages(Lang.en); (i.e) 'en'
Example in Code Sandbox.
Static registerRegister Custom Validation Rules.
ReactFormInputValidation.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.');
Example in Code Sandbox
The name of the rule.
Returns a boolean to represent a successful or failed validation.
An optional string where you can specify a custom error message. :attribute inside errorMessage will be replaced with the attribute name.
Static registerRegister an asynchronous rule which accepts a passes callback.
The data-async custom attribute should be added in the html element.
ReactFormInputValidation.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={this.form.handleChangeEvent}
onBlur={this.form.handleBlurEvent}
value={this.state.fields.customer_name}
data-async
>
Example in Code Sandbox.
The name of the rule.
An optional string where you can specify a custom error message. :attribute inside errorMessage will be replaced with the attribute name.
Static setYou can supply global custom attribute names in your app with the attributes property.
ReactFormInputValidation.setAttributeFormatter(function(attribute) {
return attribute.replace(/_/g, ' ');
});
Example in Code Sandbox.
A Callback function to configure the attribute name.
Static setYou can also add your own custom language by calling setMessages.
import ReactFormInputValidation, { Lang } from "react-form-input-validation";
ReactFormInputValidation.setMessages(Lang.en, {
required: 'The :attribute can't be empty.'
});
Example in Code Sandbox.
Static useSet the locale string for error messages.
ReactFormInputValidation.useLang("en");
Example in Code Sandbox.
Construct the React Form Input Validator instance.
Example