@eduenano27/react-form-validator NPM

React Form Validation

Install

npm install @eduenano27/react-form-validator

Implementation

import { FormValidator } from "@eduenano27/react-form-validator";

export class MyFormComponent extends Component {
    constructor(props) {
        this.formValidator = new FormValidator({
            component: <component>,
            
            fields: {
                <fieldname>: <rules | rules + locale>
            },
            
            rules (optional): <custom rules>,
            message (optional): (error) => <error jsx>
        });
    }
    
    handleInputChange(event) {
        const fieldName  = event.target.name;
        const fieldValue = event.target.value;
        
        this.setState({
            [fieldName]: fieldValue
        });
        
        this.formValidator.validateOnly(fieldName, fieldValue);
    }
    
    handleSubmitForm(event) {
        const validateForm = this.formValidator.canSubmit();
        
        if(!validateForm) {
            //oops
            return;
        }
    }
    
    render() {
        { this.formValidator.hasError(<fieldname>) } <- has error (bool)
        { this.formValidator.getError(<fieldname>) } <- show error (jsx)
    }
}

Methods

formValidator.validateOnly(fieldName, fieldValue) Validates one field
formValidator.canSubmit(fieldsToUpdate <optional>) Checks if all fields are valid
formValidator.hasField(fieldName) Checks if field is included on form validation
formValidator.hasError(fieldName) Checks if field is not valid
formValidator.getError(fieldName). Returns JSX element with error
formValidator.reset(). Reset errors and fields

Rules

Rule	Syntax
required	required
email	email
same	same:<field/string>
min	min:
max	max:

Custom Rule Example

import { IFormFields } from "@eduenano27/react-form-validator/interfaces/fields/IFormFields";
import { IFormRuleReplacements } from "@eduenano27/react-form-validator/interfaces/rules/IFormRuleReplacements";
import { FormRule } from "@eduenano27/react-form-validator/rules/FormRule";

export class MyCustomRule extends FormRule {
    protected message: string = 'Field must have less than :max characters';

    public validate(value: string, params: string[], fields: IFormFields): boolean {
        var max = parseInt(params[0]);

        return value.length <= max;
    }

    public replacements(params: string[]): IFormRuleReplacements {
        return {
            'max': params[0]
        }
    }
}

Example

export class FormComponent extends Component {
    constructor(props) {
        this.formValidator = new FormValidator({
            component: this,
            
            fields: {
               username: {
                   rules: 'required|min:3|max:12',
                   
                   locale: {
                       required: 'Username is required!',
                       min: 'The username must have at least :min characters',
                       max: 'Username must be less than :max characters'
                   }
               },
               
               email: 'required|email',
               password: 'my_password_rule'
            },
            
            rules: {
                my_password_rule: new MyCustomRule
            },
            
            message: (error) => <div className="alert">¡Oops! { error }</div>
        });
    }

    handleInputChange(event) {
        const fieldName  = event.target.name;
        const fieldValue = event.target.value;
        
        this.setState({
            [fieldName]: fieldValue
        });
        
        this.formValidator.validateOnly(fieldName, fieldValue);
    }
    
    handleSubmitForm(event) {
        const validateForm = this.formValidator.canSubmit();
        
        if(!validateForm) {
            //oops
            return;
        }
    }
    
    render() {
        { this.formValidator.getError(<fieldname>) }
    }
}