react-form-inputs-validator

React library for easy form validation.

Install

npm install react-form-inputs-validator --save-dev

Demo

https://kubax2000.github.io/react-form-inputs-validator/

Usage

import React from 'react';
import useValidator from 'react-form-inputs-validator';

function SignInForm() {
    const { inputs, Validator } = useValidator({
        Email: "",
        Password: "",
    });

    const handleFormSubmit = () => {
        alert(JSON.stringify(inputs));
    };

    return (
        <div>
            <input {...Validator.importInput("Email")} />
            <Validator.Required for="Email">This field is required.</Validator.Required>
            <Validator.IsEmail for="Email">This field must be email.</Validator.IsEmail>
            <input {...Validator.importInput("Password")} />
            <Validator.Required for="Password">This field is required.</Validator.Required>
            <input
                type="submit"
                value="Sign In"
                {...Validator.importSubmit({ onSuccess: handleFormSubmit })}
            />
        </div>
    );
}
export default SignInForm;

1.0.2 (2021-09-02)

CHANGES

• CHANGELOG.md: added

Features

• hasError: added access to inner errors
• hasVisibleError: added access to inner errors

1.0.0 (2021-09-02)

BREAKING CHANGES :boom:

• Removed tags
  • Removed <Validator> tag - use useValidator() hook instead
  • Removed <Validator.Input> tag - use <input {...Validator.importInput('Name')}/> instead
  • Removed <Validator.IsAlphanumeric> tag - use <Validator.IsValid rule={/^[A-Za-z0-9]+$/}> instead
  • Removed <Validator.Submit> tag - use <input type="submit" {...Validator.importSubmit({onSuccess: () => {}})}/> instead
• Renamed tags
  • Renamed <Validator.IsRegexValid> to <Validator.IsValid>
  • Renamed <Validator.IsRequired> to <Validator.Required>
  • Renamed <Validator.IsValueValid> to <Validator.IsInRange>

Features

Input types

• importCheckbox: input type checkbox support
• importDatePicker: moment object input support (from moment.js)
• importRadio: input type radio support

Rules

• IsMomentValid: moment object valid check