@eduenano27/react-form-validator

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>) }
    }
}

Links

https://gitlab.com/eduenano27/react-form-validator/-/issues https://www.npmjs.com/package/@eduenano27/react-form-validator